DEV Community

loading...

Discussion on: Managing state with React Context

Collapse
redraushan profile image
Raushan Sharma

Hi Olena, thanks for a well written article.

I have worked in a few projects which was heavily using context API for state management, and I am completely agree that it solves a problem which is prop drilling, however on the other hand it creates another problem which is nested JSX wrapped inside Consumer. For me code readability becomes a problem and if you are working on a big project that debugging becomes a nightmare.

I do not face the same issue when I am working with Redux or MobX libraries, JSX remains clean and intact.

Happy coding!

Collapse
karimdaghari profile image
Karim Daghari

Hey Raushan,

Although I think that this more of a minor annoyance than a real problem, I completely agree with you. Personally the way I solved it was create a component AppProviders in which I included all contexts and then I would use that component (AppProviders) to wrap around my App component, therefore resulting in a clean, easy to read JSX.

Collapse
olenadrugalya profile image
Olena Drugalya Author

Hi Raushan, thank you very much for your comment. It is indeed a double edged sword :) As I wrote in article, if you only wants to solve prop drilling, then Context would be just fine. Thank you for pointing out that JSX nesting can be solved with Redux, it's very useful :)

Collapse
ivanjeremic profile image
Ivan Jeremic

If you use redux only to avoid a lot of Providers then I don't see the point, I mean I have lots of providers and for me Context makes my codebase cleaner and Redux makes my whole project look like a mess. Just useReducer with Context is all you need in 95% of apps and I don't agree that it makes code unreadable.