React Context API Demo
While I haven’t been using React for a very long time, I feel confident using JSX and organising components. The advice given to me was that if you have more than 10 components consider state management in favour of prop drilling. And for this task Redux is arguably the most popular and widely used. This didn’t go smoothly for me the first time. I spent 2 days setting it up but reached a point where I didn’t understand why I was doing what I did. So, I abandoned it for drilling there and then. But since React and Redux go hand in hand I felt like there were gaps in my knowledge.
A while later I discovered Dev Ed’s YouTube video on context API. One of the points he made was that using it would provide a foundation for learning and understanding Redux. I liked this train of thought and so I decided to include context API in my next app. This app is a small one and all I am using context for is to make state accessible to two sister components named Section.
I used create-react-app to to get started and jumped into the folder. If I planned to drill then I would put my state in the App component so that it could be passed down to the children. However, when using the context API state goes into a component of its own.
In my case state will be composed of coins which I fetched from an API so by convention I named the component CoinContext. At the top I import React along with useState, useEffect and createContext.
useState allows me to have state in a functional component and useEffect works similar to ComponentDidMount.
As for createContext, I call this in the following line and assign it to a variable the shares the filename CoinContext and export it.
The second thing I export in this file is the CoinProvider. This is what holds my state and will wrap around the components that will access state. Notice the object is assigned to “value”. This will be the data passed to the sister components I mentioned earlier. You can pass any datatype here. It doesn’t have to be an object. For me “value” was the only name that worked though.
The code below is way more than what you need to understand context. But it’s what I needed for my app. I’ve got my fetch there and two additional functions.
As previously stated, we need to make this data available to the sister Section components. And we do this by importing the CoinProvider and using it as a wrapper for the other components. Let’s see how that looks:
At this point we’re almost done. Section is just about able to touch the data. But first we need to give it the tools. In the same way we imported createContext in the CoinContext component we need to import useContext anywhere we want to access the data. We also need to use it in conjunction with CoinContext. Let’s see how they snuggle up in real life:
A review of the steps taken to make this work:
- Create Context Component with createContext imported. Export both CoinContext and CoinProvider.
- Components accessing the state must be wrapped in CoinProvider.
- Components accessing state must import useContext and filenameContext. They both have to be used together to access the data.
