Hi folks,
Managing data in an app is little tricky when many components are sharing and updating it. useState, useReducer, useMemo etc. are some ...
For further actions, you may consider blocking this person and/or reporting abuse
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
does that mean we should avoid using useContext.
I think there some use case that a good fit for useContext, for example you have some data that readonly between multiple components.
I want to use it for sessionmanger to pass user object in body tag.
stackoverflow.com/questions/763610...
Can you help me out with this
agree. for complex projects with complex frontend UX it is difficult and in-efficient for context
Which alternate concept are you preferring / using nowadays?
Love this one github.com/atlassian/react-sweet-s...
This is literally the best stuff I saw here, gracias 🙌
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.
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.
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.
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
yup. this is the correct answer. context is meant to be a dependency injection solution and not for state management.
React Hooks like
useContextare definitely preferred over a somewhat complex Redux for state management.I also liked this:
Thank you 🙌
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 :)
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.
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.
I love using context. It's so much easier than any state management lib I've used.
Nice! in my project, I using context instead of redux, and it's still good so far.
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.
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!
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.
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
Great article. Thanks for sharing
So helpful Tutorial Thanks
Nice article, thank you for the explanation
Thank! I think it's better to use useReducer together with useContext
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🔥🔥
@luubinhan
does that mean we should avoid using useContext.
can i have your source code, pls
It is already added in article!