Beginner Guide to React Context API with Hook(useState
Managing State in React App is tricky, especially when you want to share data from component 1 to (x)components, you will have to pass the data from component 1, 2 to 7 which is basically unnecessary. Packages like Redux, Flux, MobX e.t.c helps to manage state, but the problem with this kind of packages is that they are external to react library, some people find it kind of cumbersome to fully understand it, working and integrating it in react application. So react team releases alternative to Redux which is Context API in React 16.x.
What is React Context API
It is a feature/approach that provides a way to pass data through the component tree without having to pass props down manually at every level.
Let assume I am a delivery man, I want to deliver a package to Floor 7 of a particular building using the staircase. For me to get to floor 7, I have to carry the package from floor 1 to 2 to 3..7, it kinda cumbersome right? why can’t I just jump/teleport myself from floor 1 to 7 and vice-versa without me stressing myself with going through from floor 1 of a building to the last floor(7th Floor)? That’s typically how passing data via props from parent component to nested child component works. But with React Context you don’t have to go through all that, all you need to do is just jump directly to floor 7 and jump back without making any additional/unnecessary trip.
Simple Guide
const ThemeContext = React.createContext('light');
class App extends React.Component {
render() {return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
}
Terminologies to understand
React.createContext
const MyContext = React.createContext(defaultValue);it will allow you to create a context object, which accepts default values. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching Provider above it in the tree.
Context.Provider
<MyContext.Provider value={/* some value */}>The moment a context object has been created you will have access to context API method such as Provider, Consumer e.t.c. Provider allows consuming component to subscribe to context changes and also set store value/data.
Context.Consumer
<MyContext.Consumer>
{value => /* render something based on the context value */}
</MyContext.Consumer>Just as the name implies Consumer it allows you to consume the value set/store from the Context Provider.
When Should I use React Context API
Context API is only meant to be used when you needed to access your data from a nested component, The moment you realized the nested level of your component is more than 3, then try to use Context API to avoid passing unnecessary data via props.
React Hook(useState)
Sophie Alpert said at React Conf 2018 Class are very confusing and annoying to understand for both Human and Machine. React team develops React Hook to manage state from a functional component and also handle every component life cycle supported by the class component. e.g componentDidMount, componentDidUpdate,componentWillUnmounte.t.c
Simple Guide
const [state, setState] = useState(0);I used array destructing to extract state and setState from useState. I set the initial value/state as zero(0). useState can accept any default value string,numbers,bool,array,object.
NB: useState return an array of 2 elements: current state and set State. (state and setState) are just variable representation, you can use any name to represent your state and setState.
Passing data via props
From the above source code is the normal way of passing data without Context API or redux in react. In order for component 7 to receive data (package), the package has to pass all the way from Floor 1 to Floor 2… Floor 7.
Managing State with hook and context API
in the above snippet, I created a reusable context that can be used across other components in my application.
import PackageContext from "./context";I import context component created earlier, we are going to be using it to set our provider value and consume the value.
const [state, setState] = useState({
companyName: "DHL Delivery Package",
recipientName: "Mr Adekoya Damola Felix",
package: "MacBook Pro retina Display (20Kg)"
});I set the initial state which is the package(data) to be delivered, you can consider provider component as the center store and also HOC(Higher-order component which going to wrap our main component.
return (
<PackageContext.Provider value={{ data: state }}> {props.children}
</PackageContext.Provider>
);I returned my context component I created earlier, assign a value as props which hold the state data (Package Details)
Let go straight directly to the last component (Floor 7) where we are going to use our data. I wrapped all my tags with <Context.Consumer> which allows me to connect to my store and access my data directly.
NB: In any component, you want to use or consume the data you already saved in the provider. all you have to do is import your context component and use the Consumer property or you can destructure Consumer from the context component. E.g
import {Consumer} from './context-component'From your App Component, you need to wrap the main component(Building component) as a parent component. Every Child/children component of the building will have access to the Provider Data more like Provider in redux.
<Provider>
<Building />
</Provider>How to Update My State from Child or Consumer Component
Updating your state that resides in component 1 from component 7 might look strange, but you can actually update your state from any Consumer component.
<PackageContext.Provider value={
{
data: state,
updateDeliveryStatus: () =>
{
setState({ ...state, deliveryStatus: "Delivered" });
}
}}>in the Provider value data object, you need to set the action you want to perform in the object as a function which can later be triggered in the consumer component.
Conclusion
In this article, I hope I was able to impact and explain how context API and react hook usestate works. Context API is basically your center store where you can store your data that you want to access globally in your react application. Hook allows you to manage your state in a functional component.
I have created a simple demo on codesandbox to demonstrate how to use context API with react hook useState.
You can follow me on twitter: Damola Adekoya
