Blogged Answers: Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux)

[utterances-bot]

Blogged Answers: Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux) · Mark's Dev Blog

https://blog.isquaredsoftware.com/2021/01/blogged-answers-why-react-context-is-not-a-state-management-tool-and-why-it-doesnt-replace-redux/

[ifndefdeadmau5]

Nice write up as always, just wanted to say thanks for providing quality answers at Reactiflux!(and also first time discovering comment section...)

[gadi246]

One thing that is not clear to me.If context is ment to be used in low frequency updates as Sebastian says, and React-Redux uses context under the hood how it overcome this pitfall and being able to deliver high frequency updates?

[markerikson]

@gadi246 : as covered in the linked post React, Redux, and Context Behavior, the difference is that React-Redux passes down the Redux store instance via context. Individual components call store.subscribe() to listen to Redux state updates, instead of doing const reduxState = useContext(ReactReduxContext). So, it's a completely different update approach, with different behavior.

Also see my post The History and Implementation of React-Redux for details on how it works internally.

[bb-in-hoodie]

such a great post. thanks for sharing :)

[didof]

Absolutely concise and explanatory! Thank you

[victorivens05]

Hello. Can you please have a look at this lib I built: https://www.npmjs.com/package/react-simple-reducer It uses useReducer and ContextApi together. I'm using it in production and I'm happy about it, mostly because of the lack of boilerplate and the typescript helpers.

[gib]

Many thanks for this post, detailed examples, and links to outside articles. Especially Dan Abramov's (co-author of Redux) You Might Not Need Redux post.

I wanted to suggest that codebase or team size should not inform a need for Redux. In the item listed under the TLDR; reasons you may want to use Redux:

The app has a medium or large-sized codebase, and might be worked on by many people

This is in fact a reason to focus on the most simple and clear solutions that meets the application's needs regardless of app or team size.

[Kontsedal]

Thanks for the detailed article. Recently, I've tried react-query library and realized that almost all my redux data is coming from the server. Eventually, I understood that I don't need redux or any other state management library at all. It removed tons of boilerplate code and struggle. Maybe it worth mentioning in the "Choosing the Right Tool" part.

[markerikson]

@Kontsedal: fwiw, I wasn't trying to compare Redux or Context with any other tools (ie, MobX, XState, React Query, Apollo, etc) - just Context + useReducer and Redux.

Note that we do have a new "RTK Query" library available in alpha that is basically equivalent to React Query, but built on top of Redux Toolkit. Once it's ready, the APIs will be merged back into Redux Toolkit itself. You might want to try that out and see how well it works for you.

[Kontsedal]

@markerikson That a great news, thanks for sharing

[sungik-choi]

Thanks for sharing

[MadsHaerup]

This is legendary! Thanks for your effort and the clarification

[VinayKrMittal]

Great Post !! Thanks for sharing

[BrunoUmbelino]

thanks, i'm still starting in front-end-dev and it was very useful for me

[vinhnhq]

great post. thanks for sharing. ^o^

[joshstroud]

Great post. A lot of food for thought here. Thanks for writing!

[lk9100]

redux for the nice debug tool, a must for complex project!

[Zach-Jaensch]

This is a really great description of the two tools, but I am unsure why you are hung up on people saying "I use context for state management" knowing that they are using it in conjunction with useState or useReducer, but you easily slide past the fact that you cannot use redux by itself without additional tooling.

[joel-regen]

one of the best articles i've read recently on ANY topic - very well written, clear, accurate and concise. thank you.

[stefanbobrowski]

You CAN use the Context API (useContext and useReducer) as a state management system, especially in smaller/solo projects. I prefer it coming from Redux Saga and React Recoil, since I can "manage values" myself and have no need for the extra features. If I did, I would lean towards using React Recoil which is also built by Facebook.

Even for larger applications there are ways you can divide the application into smaller module applications, all rendered separately on the same page, foregoing the need for monolithic redux state management anyways.

I would say for most people just trying to get a simple global state management system going, just use the Context API and work on hooking up the application with a store that has context, reducers, actions, etc. Example: https://github.com/stefanbobrowski/Template

[Davidlab]

My comment last time was deleted for what ever reason. My thinking I am tying to spam the post. However, I wrote Redux replacement that you may be interested in trying. I won't post it here unless you are interested. Don't want to get deleted again.

[KeremAksoy11]

This is amazing bro. thanks for everything. I understand better now

[tewarimohit]

Thanks... The concept is more clearer now..

[webMasterMrBin]

excellent article 👍

[iamlaksh1]

excellent article. Cheers!

[benderillo]

This does not cover the use case of an app that heavily data-driven and uses one of the ReactQuery or Apollo GraphQL (with react hooks) solutions. From my experience and in my opinion, if an app uses RQ or Apollo GQL, then these are the central state management systems for the app.

Because the state is essentially the data on the backend and browser cache. All the components hooked to the state via useQuery hooks and react to the changes in the state.

Sure there still can be some unrelated state values to be managed, but I'd argue those can be addressed by Context + useState/useReducer.

Why would the app like that need another state management solution like Redux? And by extension, as most of the apps are essentially just like I described, why would one go with Redux instead of the ReactQuery or similar solution in the first place? Apart from being tied to react only, I don't see benefits of Redux here.

I am currently trying to understand what's market view on this and would appreciate author's opinion on this topic.

[markerikson]

@benderillo : that's exactly the point I made in https://changelog.com/posts/when-and-when-not-to-reach-for-redux .

If the only thing you are using Redux for is caching server state, and you choose to use a different tool to manage that caching...

well then yes, you probably don't need Redux at that point because you just chose a different tool for that same use case.

as most of the apps are essentially just like I described

This is the part I would disagree with. Sure, there are plenty of CRUD apps out there, but there are many apps that aren't just basic CRUD.

Also, I'll point out that Redux Toolkit comes with RTK Query, which is a full-blown purpose built data fetching and caching solution, built on top of standard Redux patterns like thunks and reducers, and with a number of unique features (streaming updates, ability to handle fetch results in other parts of the Redux store, OpenAPI/GraphQL codegen, etc). So, it's entirely possible to use RTK Query for all the server state caching in an app, even if you don't have any other major client-side state beyond that.

If you haven't seen RTK Query yet, please see these resources:

• https://redux.js.org/tutorials/essentials/part-7-rtk-query-basics
• https://redux-toolkit.js.org/rtk-query/overview
• https://redux-toolkit.js.org/rtk-query/comparison

[benderillo]

@benderillo : that's exactly the point I made in https://changelog.com/posts/when-and-when-not-to-reach-for-redux .

If the only thing you are using Redux for is caching server state, and you choose to use a different tool to manage that caching...

well then yes, you probably don't need Redux at that point because you just chose a different tool for that same use case.

as most of the apps are essentially just like I described

This is the part I would disagree with. Sure, there are plenty of CRUD apps out there, but there are many apps that aren't just basic CRUD.

Also, I'll point out that Redux Toolkit comes with RTK Query, which is a full-blown purpose built data fetching and caching solution, built on top of standard Redux patterns like thunks and reducers, and with a number of unique features (streaming updates, ability to handle fetch results in other parts of the Redux store, OpenAPI/GraphQL codegen, etc). So, it's entirely possible to use RTK Query for all the server state caching in an app, even if you don't have any other major client-side state beyond that.

If you haven't seen RTK Query yet, please see these resources:

• https://redux.js.org/tutorials/essentials/part-7-rtk-query-basics
• https://redux-toolkit.js.org/rtk-query/overview
• https://redux-toolkit.js.org/rtk-query/comparison

Thanks for the answer! Really appreciated! Indeed, I have discovered RTK Query right after I left the comment :) So it completes the picture for me. My conclusion then being if I am with Redux already then should be really looking into RTK Query for managing server-side state.

And when starting from scratch, if most of the state is server-side then it is a personal preference then whether going Redux Toolkit + RTK Query or Context/useReducer and React Query/SWR or whatnot.

[clemgbld]

Nice article !

[TheMeteoRain]

Context

• Does not store or "manage" anything
• Passes down a single value, which could be anything (primitive, objects, classes, etc)
• Allows reading that single value

I know what you are trying to say that Context itself isn't state management tool and you are trying to point that single fact out. When trying to do so many readers might get wrong impertation. The reality is that nobody uses ONLY Context. It's usually used together with useState or useReducer and those things combined makes it state management tool.

I appreciate the sentiment of the article of trying to help people to understand what things are and how they are supposed to be used. But I think this article will create wrong idea in peoples mind. Because if somebody is new to these things they might think after this article that "Context can't be used as a state management tool" which is wrong. Comment by @benderillo was excellent to try to undo the wrongs stated in the article

[nareshbhatia]

Hi @markerikson, I really enjoyed reading this article. I am curious about your recommendation to put "global state" in Redux and "local state" in React components. What about the stuff in the middle? We have a very complex module (nested React component) which gets instantiated on only one page of the app. This module has lots of state, but it is not global. In fact, we would like to move this module into its own package. Is there a way to use Redux in such a standalone package? And how would it interact with Redux in other packages and in the main app?

[cakasuma]

Hey, just to let you know that this is an inspiring article, really broaden my knowledge on this state management topic!