Before diving in what is React context? Let’s first understand why do we need it with an example. Let’s consider a scenario where we have 6 components A,B,C,D,E & F. some are the child components please refer the below image for better understanding.

Here A,B & C are first level component and D & E are the second level component where D is the child component of B component and similarly E is the child component of C. F component at third level is Child component of E.

Now suppose we are having some component at Top component that we need at component A,D & F.

There are two ways to achieve it;

Way 1:

username is easily accessible to component A but when it come to D & F. We have to pass username through the B to D and then C to E then it will reach to F. Please refer the below tree structure for better understanding.

Here it seems to be very easy because we are having having limited number of component but when it comes to the complex structure. It will be troublesome to manage and As in result it gives the prop drilling issue.

Way 2:

Here comes the Context in picture to solve prop drilling issue.

What is React context?

Context is a way that benefits us to pass data through the component tree without having to pass props down manually at every level unlike the way1.

source: https://reactjs.org/docs/context.html

Please do visit the official website for more at https://reactjs.org/docs/context.html

There are two ways to implement React context, using Class and functional Component. I am working on to provide an example using functional component. If you need it for class component please do comment, i will surely try provide it as well.

TaDa! We have achieved new miles together. Hope you guys enjoyed it. Thank you for your all support 🙂