What is the React Context Hook, and how can we use it in our applications? The most basic form of creating a react application data is passed down from parent to child. In the world of React, we call this prop drilling. If we were making an extensive application and the lowest component needed the data from the parent, this process would become overwhelming. Fortunately, React gives us a magical delivery system that allows us to pass global data between components as needed.

When Should we use context in our applications?

When Should we use context in our applications?
We should use context sparingly in our applications. The data passed via context should not be updated often. We can compare context to the global variables used in our javascript application before we learned to use React. New developers often need to correct the mistake of replacing context as a primary way to pass props to every component. While context can be used as a state management tool, it would further complicate the code in our application. Tools such as Redux are better equipped for those purposes.

It is also possible to give too many props to components that may not require them, causing too many re-renders. As developers, we need to ensure that our application's context is required globally. Context can complicate our application as it may be harder to reuse components. A better solution may be to improve our component composition.

Creating Context

We will need a context object and a context provider component to use context in our application. Our context object will look like this:

Context Provider Component

We now have to set up our context provider object as follows:

At this point, we created a context object component which is being exported throughout our app and will be used in our app component. We are importing it to our app component at line 3.

Using Context

We are now in a child component of my sample application called ReviewCard.js. To use the context data, we must use React's useContext hook. useContext is a React Hook that lets you read and subscribe to context from your component. Removing all props passed down via the prop drilling method is also imperative, as we are now using context as our primary delivery method. We can still prop drill as well as long as those props are not being passed in as context. Props used in context should only be props that we would use globally. A prop used once for a particular component can still be passed via prop drilling.

Conclusion

This post taught us how to use context to bypass prop drilling and its effectiveness. When and when not to use context. I recommend learning React context before moving on to other complex global state management systems like Redux. Use caution when using context as a global state management tool.