Update Context (#956)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: atilafassina

src/routes/concepts/context.mdx

@@ -21,15 +21,28 @@ This offers a way to access state across an application without passing props th
 Context is created using the [`createContext`](/reference/component-apis/create-context) function.
 This function has a `Provider` property that wraps the component tree you want to provide context to.
 
+<TabsCodeBlocks>
+<div id="/context/create.js">
 ```jsx
 import { createContext } from "solid-js";
 
 const MyContext = createContext();
+```
+</div>
+<div id="/context/component.jsx">
+```jsx
+import { MyContext } from "./create";
 
-export const Provider = (props) => {
-	return <MyContext.Provider>{props.children}</MyContext.Provider>;
+export function Provider (props) {
+	return (
+		<MyContext.Provider>
+			{props.children}
+		</MyContext.Provider>
+	)
 };
 ```
+</div>
+</TabsCodeBlocks>
 
 ## Providing context to children
 
@@ -38,106 +51,41 @@ Once a value is passed to the `Provider`, it is available to all components that
 
 When passing a single value, it can be directly passed to the `value` prop:
 
-```jsx
+```jsx title="/context/component.jsx"
 import { createContext, useContext } from "solid-js";
-
-const MyContext = createContext("initial");
+import { MyContext } from "./create";
 
 const Provider = (props) => (
 	<MyContext.Provider value="new value">{props.children}</MyContext.Provider>
 );
 ```
 
-However, if you need to access multiple values, they must be passed as an object literal, or using double curly braces (`{{ }}`):
-
-```jsx {15-19}
-import { createContext, createSignal } from "solid-js";
-
-const MyContext = createContext("default value");
-
-export const Provider = (props) => {
-	const stringVal = "new value";
-	const numberVal = 3;
-	const objVal = {
-		foo: "bar",
-		obj: true,
-	};
-
-	return (
-		<MyContext.Provider
-			value={{
-				stringVal,
-				numberVal,
-				objVal,
-			}}
-		>
-			{props.children}
-		</MyContext.Provider>
-	);
-};
-```
+<Callout type="tip" title="Complex Types">
+When passing multiple values (as an `array` or `object`), it is recommended to use a [store](/reference/component-apis/create-context#usage).
+</Callout>
 
 ## Consuming context
 
 Once the values are available to all the components in the context's component tree, they can be accessed using the [`useContext`](/reference/component-apis/use-context) utility.
 This utility takes in the context object and returns the value(s) passed to the `Provider`:
 
-```jsx {10}
+```jsx title="/context/component.jsx"
 import { createContext, useContext } from "solid-js";
-
-const MyContext = createContext();
+import { MyContext } from "./create";
 
 const Provider = (props) => (
-	<MyContext.Provider value="new value">{props.children}</MyContext.Provider>
+	<MyContext.Provider value="new value">
+		{props.children}
+	</MyContext.Provider>
 );
 
 const Child = () => {
 	const value = useContext(MyContext);
-	return <>{value}</>;
-};
-
-export const App = () => (
-	<Provider>
-		<Child /> {/* "new value" */}
-	</Provider>
-);
-```
 
-When you are passing multiple values into the `Provider`, you can destructure the context object to access the values you need.
-This provides a readable way to access the values you need without having to access the entire context object:
-
-```jsx {26}
-import { createContext, useContext, createSignal } from "solid-js";
-
-const MyContext = createContext();
-
-const Provider = (props) => {
-	const stringVal = "new value";
-	const numberVal = 3;
-	const objVal = {
-		foo: "bar",
-		obj: true,
-	};
-	return (
-		<MyContext.Provider
-			value={{
-				stringVal,
-				numberVal,
-				objVal,
-			}}
-		>
-			{props.children}
-		</MyContext.Provider>
-	);
-};
-
-const Child = () => {
-	const { stringVal, numberVal } = useContext(MyContext);
 	return (
-		<>
-			<h1>{stringVal}</h1>
-			<span>{numberVal}</span>
-		</>
+		<span>
+			{value}
+		</span>
 	);
 };
 
@@ -148,7 +96,7 @@ export const App = () => (
 );
 ```
 
-## Customizing context utilities
+## Customizing Context Utilities
 
 When an application contains multiple context objects, it can be difficult to keep track of which context object is being used.
 To solve this issue, you can create a custom utilities to create a more readable way to access the context values.
@@ -158,8 +106,7 @@ This also provides you with the option of re-using the `Provider` component in o
 
 ```jsx
 import { createSignal, createContext, useContext } from "solid-js";
-
-const CounterContext = createContext();
+import { CounterContext } from "~/context/counter";
 
 export function CounterProvider(props) {
 	let count = 0;
@@ -211,7 +158,7 @@ export function CounterProvider(props) {
 }
 ```
 
-## Updating context values
+## Updating Context Values
 
 [Signals](/concepts/signals) offer a way to synchronize and manage data shared across your components using context.
 You can pass a signal directly to the `value` prop of the `Provider` component, and any changes to the signal will be reflected in all components that consume the context.
@@ -234,12 +181,10 @@ export function App() {
 </div>
 <div id="Context.jsx">
 ```jsx
-import { createSignal, createContext, useContext } from "solid-js";
-
-const CounterContext = createContext(); // create context
+import { createSignal, useContext } from "solid-js";
 
 export function CounterProvider(props) {
-	const [count, setCount] = createSignal(props.count || 0);
+	const [count, setCount] = createSignal(props.initialCount || 0);
 	const counter = [
 		count,
 		{
@@ -263,7 +208,7 @@ export function useCounter() { return useContext(CounterContext); }
 ```
 </div>
 <div id="Child.jsx">
-```jsx
+```tsx title="/context/counter-component.tsx"
 import { useCounter } from "./Context";
 
 export function Child(props) {
@@ -290,21 +235,50 @@ When working with TypeScript, this can introduce type issues that make it diffic
 
 To solve this issue, a default value can be specified when creating a context object, or errors can be handled manually through the use of a custom `useMyContext` utility:
 
-```jsx
-import { createContext, useContext } from "solid-js";
-
-const MyContext = createContext<string>();
+```tsx title="/context/counter-component.tsx"
+import { useContext } from "solid-js";
 
 function useMyContext() {
   const value = useContext(MyContext);
-  if (value === undefined) {
-    throw new Error("useMyContext must be used within a MyContext.Provider");
+
+  if (!value) {
+    throw new Error("Missing context Provider");
   }
+
   return value;
 }
 
 function Child() {
   const value = useMyContext();
+
   return <div>{value}</div>;
 }
 ```
+
+## Common issues with `createContext` and `useContext`
+
+If no default value is passed to `createContext`, it is possible for `useContext` to return `undefined`.
+
+<Callout type="info" title="More on default values">
+Read more about default values in the [`createContext`](/reference/component-apis/create-context) entry.
+</Callout>
+
+Because of this, if an initial value was not passed to `createContext`, the TS type signature of `useContext` will indicate that
+the value returned might be `undefined` (as mentioned above). 
+This can be quite annoying when you want to use the context inside a component, and particularly when immediately destructuring the context. 
+Additionally, if you use `useContext` and it returns `undefined` (which is often, but not always, the result of a bug), the error message thrown at runtime can be confusing.
+
+The most common solution for it is to wrap all uses of `useContext` in a function that will explicitly throw a helpful error if the context is `undefined`. 
+This also serves to narrow the type returned, so TS doesn't complain. 
+As an example:
+
+```ts title="/context/counter-component.tsx"
+function useCounterContext() {
+	const context = useContext(CounterContext)
+	if (!context) {
+		throw new Error("can't find CounterContext")
+	}
+	return context
+}
+```
+