Do you think you know Context API in React.js?

Hello folks! Hope you're all doing awesome.

Today I want to ask you about the Context API available in React.js.
We all know that it solves prop drilling problem and we should not use it in the complex projects and all. But why we say that. Let's explore that.

So, you might be saying I already know about context API, let's skip this post. WAIT fellow developer... atleast read and find out.

Note: I am not going in the basics of what and why we need context API.

Project Setup

I am going to creating three components named Parent, Child1 and Child2. And a Counter Context for storing the counter value.

Parent Component

Child1 Component

Child2 Component

As you can see we have a button in component to increase the counter value and using the CounterContext in Child1 only.

The output looks like this:

Adding Console logs to determine the rendering flow

Now that we've created the components, it's time to add the console log statements to determine how the rendering is happening.

So, I added a simple console logs like these in all of the components:

If I now open the console of the output window, below are the logs:

Some might ask why we are having two same logs for one console logs statement, well that's because of the React's Strict Mode(Another topic for another day!)

Back to the topic, What do you think will be the output if I click on the Increment button?

I cleared the console and clicked on Increment.

Hmm, Same thing again.
Well yes, whenever we change the state stored in the Context API, only the children components using the context will gets re-rendered.

This dips the performance of React as it has to re-render even those who do not have any linking to the context.

Next time, think about whenever you change any state in the Context API in your project because if you change the state all the components wrapped inside will get re-rendered no matter if they uses the context or not.

That is one more reason people uses different state management techniques like Redux. As in Redux, if the component is using the variable that gets changed, only then it will re-render.

Okay, let me ask you one more question. What if I use React.memo() to wrap my Parent, Child1 and Child2 components? What would happen?

When the button is clicked, will
No component re-renders
Only Parent and Child2 re-renders
Or, all of them

Let's see:

Now if clicked on Increment button:

If you chose Option 2, Congratulation you got it right.

That means, even if you memoize the components, and triggers an state update in the Context. Only the components that uses the context will get re-rendered.

But what if I just declare the useContext hook inside the Child1 component. Not going to destructure or access any state from context. What do you think would happen?

Now when clicked on Increment counter:

As you can see, even when you are just using the context and not the state that gets triggered, the components accessing the context will get re-rendered.

Final Thoughts

The Context API solves the problem of prop drilling and is great if used in smaller contexts/applications. But when the application state gets complex or you have a large number of components accessing and updating the state, Context API is a No-No. Try using Redux or any other state management libraries and you will save yourself from a ton of re-rendering.

Thanks for reading and I will see you in the next one.

Keep developing your bugs.

Okay, so that's Umang Mittal signing off.