DEV Community

Cover image for useContext for better state management!

useContext for better state management!

Yogini Bende on May 25, 2021

Hi folks, Managing data in an app is little tricky when many components are sharing and updating it. useState, useReducer, useMemo etc. are some ...
Collapse
 
luubinhan profile image
Lưu Bình An

You get into the issue with re-render soon, believed me I try to useContext as you mention, then the nightmere visit me when I do think complex

  • it is not designed for frequent updates
  • async operations are tricky
  • it has performance limitations
  • does not support selectors
  • you cannot prevent re-renders
  • correctly handling provider-less context is hard
Collapse
 
frankgo81 profile image
FRANK GO

agree. for complex projects with complex frontend UX it is difficult and in-efficient for context

Collapse
 
ratneshmurugesan profile image
Ratnesh Murugesan • Edited

Which alternate concept are you preferring / using nowadays?

Collapse
 
luubinhan profile image
Lưu Bình An
Thread Thread
 
zaghadon profile image
David Nzagha

This is literally the best stuff I saw here, gracias 🙌

Collapse
 
veercodeprog profile image
Veer Pratap

does that mean we should avoid using useContext.

Collapse
 
luubinhan profile image
Lưu Bình An

I think there some use case that a good fit for useContext, for example you have some data that readonly between multiple components.

Thread Thread
 
veercodeprog profile image
Veer Pratap

I want to use it for sessionmanger to pass user object in body tag.

Thread Thread
 
veercodeprog profile image
Veer Pratap

stackoverflow.com/questions/763610...
Can you help me out with this

Collapse
 
endrureza profile image
Endru Reza

Somehow, i just think that useContext might be a good idea when you have small or medium apps. But then, the code grows larger and hard to maintain i use redux for that.

Collapse
 
hey_yogini profile image
Yogini Bende

That is absolutely true and I have mentioned that in the article as well. Context can never be an alternative to any state management library like Redux, but it is good option when the app is fairly simple.

Collapse
 
liunate profile image
Nate Liu

To me redux(as state mgmt) and context(as dependency injection) are complementary, so they could be both used in a fairly complex app. Redux at high above and context at finer granular part of page.

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

React Hooks like useContext are definitely preferred over a somewhat complex Redux for state management.

I also liked this:

the useContext looks similar to useState. And later we will be using it same as useState!! Hence, whenever the setUserDetails function is called, the state change will be effective throughout the app, saving too much prop drilling.

Collapse
 
hey_yogini profile image
Yogini Bende

Thank you 🙌

Collapse
 
ngprnk profile image
Nischal Gautam

Why not use Zustand it has a similar api to useContext ? useContext is not meant for state management since it can cause unnecessary re-renders?
I recommend to check this out. Zustand can be used like redux but it has much more simple API, which can highly reduce development time and improve dev productivity.
github.com/pmndrs/zustand

Collapse
 
burhanuday profile image
Burhanuddin Udaipurwala

yup. this is the correct answer. context is meant to be a dependency injection solution and not for state management.

Collapse
 
afozbek profile image
Abdullah Furkan Özbek

Yes, as a team we also choose to use useContext for state management rather than redux.
1- Learning curve is very easy.
2- Easy to implement
3- Does not require installing additional library

But I definitely agree that, you should consider for what is the requirement of your app

Thank you for the article.

Collapse
 
aslemammad profile image
Mohammad Bagher Abiyat

It was a great article, thanks for writing.

I'm a big fan of React Context, but it's not a state management solution, it's made for sharing data between children and dependency injection, and not state management. I suggest using jotai or zustand for state management instead.

Collapse
 
manoharreddyporeddy profile image
Manohar Reddy Poreddy

1

Article has too many ! and !!
Ideally in such cases, you user should also feel same emotion :) but that's not true for this article.
Example for articles see javascript.info/object here the ! is used to as a surprise, etc.

2

Article can be take simpler examples.
Leaving all the surrounding code out, explaining only the core concept, It won't be more than 20 lines. Once that is done, you can do more lines of explanation of real world example.

Hope the feedback helps! Otherwise please ignore!! :D

+1 for writing article though :)

Collapse
 
ianwijma profile image
Ian Wijma

I love using context. It's so much easier than any state management lib I've used.

Collapse
 
jhayiwg profile image
Jhay Tabunan

Wow this is what I was looking as a solution before and just implemented few days ago, I hope I read this before because I spent a lot of time researching and try and error. I couldn't find a reference and this prove the concept is ok thanks.

Collapse
 
moafzalmulla profile image
Mohamed Afzal Mulla

Great post @yogi - very well structured, to the point and worth a read. Thank you.
Post idea: Will be good to do a post, on how useContext state can be persisted to say a postgres database, so that say a user makes some updates. It is then remembered when the user returns the next time

Collapse
 
tuvudu profile image
Tuyen Vd.

Nice! in my project, I using context instead of redux, and it's still good so far.

Collapse
 
arnelenero profile image
Arnel Enero • Edited

With the plethora of state management solutions for React, it doesn't have to be a strict dichotomy between Context vs. Redux. Some people wouldn't even regard Context as "state management", but rather just a "prop propagator". There are other good options for every requirement / situation / preference.

In fact, if you need something with a bit more than setter/getter i.e. to separate business logic from your components, there's a very simple approach: github.com/arnelenero/simpler-state (only 2 steps!). Sorry for that shameless plug, but what I'm trying to say is, our choice is not limited between Redux vs. Context.

Great article on the use of Context!

Collapse
 
jazz568 profile image
jazz568

Simple explanation. Thank you.
It would be nice to further explain that, when using multiple sets of data in useContext, how the React is re-rendering based on the change(s) of these sets of data? e.g. Is it re-rendering everything under the provider umbrella? or is it just re-rendering the components using the changed state data? This is always very confusing to me.

Collapse
 
eleloi profile image
eleloi

Nice article, thank you for the explanation

Collapse
 
aitweet01 profile image
©️hukwue🅱️uk🅰️

Great article. Thanks for sharing

Collapse
 
ajaymarathe profile image
Ajay Marathe

So helpful Tutorial Thanks

Collapse
 
bahlulhasanli profile image
Bahlul Hasanli

Thank! I think it's better to use useReducer together with useContext

Collapse
 
itshamhere profile image
Hamza Husein

In profile.js, shouldnt the props being called using useContext be destructed rather than passed in [] brackets?

Else, easy and simple to understand and implement! Thankyou🔥🔥

Collapse
 
veercodeprog profile image
Veer Pratap

@luubinhan
does that mean we should avoid using useContext.

Collapse
 
emptydn1 profile image
emptydn1

can i have your source code, pls

Collapse
 
hey_yogini profile image
Yogini Bende

It is already added in article!