A Guide to React Context API and useContext hook

React Context API was introduced a while ago with React version 16.3. It was mainly introduced to solve one of the major problems that React developers like us were facing at that time - prop drilling and component re-rendering. In this article, we will cover the reasons which led to the birth of Context API and a lot more topics related to it, with step-by-step explanations.

Index

What is React Context API?
What is Prop Drilling?
How does React Context API work?
Understanding React Context API
What is useContext hook?
React Context API VS Redux
Summary
Frequently Asked Questions

What is React Context API

Context API in React JS is an in-built API feature of React that manages props and states globally. Simply said, it is a way of passing the data from the parent to the child component - its final destination, without going through every other child component.
Imagine a situation where we have to pass down data from a parent component to the last child component. One way is to manually pass down the data in the form of props to every other child component until it has reached the last child component - where it has to be used. This process is called prop drilling and it complicates our overall code and can even make it ugly.
What we can do to avoid prop drilling is we can make a global state variable with the help of the createContext() function of React, store and fetch all state management variables from it using methods like Provider and Consumer and we can even use a hook to make things even simpler as they are globally stored. See the image below to understand.

What is Prop drilling?

In a typical React Application, we use props to pass down the data from parent to child, but sometimes it can become a hassle as it can create a lot of complex codes mainly when we are dealing with some pretty heavy coding stuff like creating a UI Theme, Authenticating user credentials, etc.

In cases like these, if we use the same method of passing props from parent to child component until it has reached its final destination, it will not become a thing of beauty but will become something so complicated that sometimes we, who have written it, might get confused, and this is called prop drilling.

Prop Drilling is a situation where data is passed down from a parent component to multiple child components until it has reached its final destination. Prop Drilling not only complicates our code but also consumes a lot of space and can sometimes be the root of re-rendering.

This is simply because whenever we pass a prop down the component, our App gets re-rendered and in the case of prop drilling, there can be multiple re-renders. To avoid this, the concept of Context API was introduced in both class and functional components. In this article, we will mainly see how to use React Context API with functional components.