126 lines
3.4 KiB
Markdown
126 lines
3.4 KiB
Markdown
---
|
|
tags:
|
|
- javascript
|
|
- react
|
|
---
|
|
|
|
# `useContext`
|
|
|
|
We use React's Context API to enable us to easily share stateful data between
|
|
all levels of an application without having to use repetitious 'prop-drilling'
|
|
at a component level.
|
|
|
|
This works best with data that is global by definition, such as theme parameters
|
|
or access authorisation. Context should not be used when standard and proximate
|
|
compositional methods and prop-passing are sufficient.
|
|
|
|
## Providers and consumers
|
|
|
|
The Context API preceded the introduction of hooks in React 16.8 and it still
|
|
underpins context management in hooks, although the syntax is simplified.
|
|
|
|
The process is as follows:
|
|
|
|
- Initiate a context
|
|
- Create a parent `Provider` component that owns the data that will be passed
|
|
down
|
|
- Create child `Consumer` components that receive the data of the parent.
|
|
|
|
We will demonstrate using a set of styles as the context that we want to pass
|
|
around our app.
|
|
|
|
```jsx
|
|
const style = {
|
|
border: "2px solid dodgerblue",
|
|
background: "lightblue",
|
|
color: "dodgerblue",
|
|
};
|
|
```
|
|
|
|
Le's initiate a context:
|
|
|
|
```jsx
|
|
const StyleContext = React.createContext();
|
|
```
|
|
|
|
Now that we have our data and have initialized a context, we can apply it to our
|
|
app components:
|
|
|
|
```jsx
|
|
<StyleContext.Provider value={style}>...</StyleContext.Provider>
|
|
```
|
|
|
|
This is the parent element of the context environment. This stores the
|
|
contextual data as a prop. Next we need to make a component that acts as the
|
|
consumer of this data. Let's create this component and call it `Child` for
|
|
simplicity:
|
|
|
|
```jsx
|
|
const Child = () => {
|
|
return (
|
|
<StyleContext.Consumer>
|
|
{(value) => (
|
|
<div style={value}>
|
|
<p>
|
|
I'm a <b>child</b>. I <b>consume</b> of the data my parent provides.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</StyleContext.Consumer>
|
|
);
|
|
};
|
|
```
|
|
|
|
The contents of this component are wrapped in tags that reference the specific
|
|
context (`StyleContext`) and the role that the component plays: `Consumer`.
|
|
|
|
We are taking the `value` prop owned by `StyleContext.Provider` and passing it
|
|
to the wrapping component of `Child` as a `style` tag. This means that `Child`
|
|
will display these styles.
|
|
|
|
The final step is just to insert our `<Child />` components beneath the parent
|
|
component, e.g.:
|
|
|
|
```jsx
|
|
<StyleContext.Provider value={style}>
|
|
<Child />
|
|
<Child />
|
|
</StyleContext.Provider>
|
|
```
|
|
|
|
## `useContext` hook
|
|
|
|
The hook removes the need to explicitly declare `Provider` and `Consumer`
|
|
components; their role becomes more implicit.
|
|
|
|
To demonstrate let's use a different example. We are going to have a single
|
|
integer as the data context, `42`.
|
|
|
|
First invoke and intialize the Context API, just as before:
|
|
|
|
```jsx
|
|
const NumberContext = React.createContext(42);
|
|
```
|
|
|
|
Next, we just need to create our provider component. We don't have to worry
|
|
about a consumer since this is handled implicitly by the invocation of the hook
|
|
|
|
```jsx
|
|
const Context = () => {
|
|
const data = useContext(NumberContext);
|
|
return <Typography>{data}</Typography>;
|
|
};
|
|
```
|
|
|
|
Then, in our code we just insert the `Context` component:
|
|
|
|
```jsx
|
|
<Context>...</Context>
|
|
```
|
|
|
|
## Updating context state
|
|
|
|
In the examples above we have only been consuming state that is owned by the
|
|
provider however in most scenarios you will also want to update the state from a
|
|
consumer. This is best achieved by combining `useContext` with a reducer and is
|
|
detailed in [Application state management](Application_state_management_with_React_hooks.md).
|