1

Why use react.useContext if you are already using redux? I am trying hard to understand what benefit react.useContext offers over redux. Is there something I am missing?

I am trying to deeper understand react.useContext and redux. So please explain why one is technically more suited for certain situation than the other. What are the technical differences?

YulePale
  • 6,688
  • 16
  • 46
  • 95
  • 1
    Stack Overflow doesn't do opinion-based questions like this, but a quick search results in hundreds of articles comparing useContext and redux and describing when to use each. (Some of them are even [here](https://stackoverflow.com/questions/49568073/react-context-vs-react-redux-when-should-i-use-each-one).) – Daniel Beck Feb 13 '23 at 05:04
  • 1
    @DanielBeck. Thank you for your answer and the link. I understand the issue about opinion based question. Sometimes you need to someone to give you an option + facts to contextualize things better. – YulePale Feb 13 '23 at 06:06
  • I'd recommend reading any of the hundreds of existing articles on this topic, then, instead of asking an opinion-based question you know is not allowed here, and garnering vague and misleading answers like the one below. – Daniel Beck Feb 13 '23 at 06:23
  • 1
    @DanielBeck this is not really opinion-based. There are clear technical differences between the two, so the question can be answered meaningfully. – phry Feb 13 '23 at 07:55
  • Well… fwiw the duplicate of this question I linked to above was closed as opinion-based… – Daniel Beck Feb 13 '23 at 08:01
  • 1
    @DanielBeck yes, because the author of that post asked for opinions, using that exact word. Also, that question was 4 years ago when Context was still new and not a lot of knowledge about it was out yet. Nowadays, this question can have a clear technical answer, and we are seeing it come up quite a lot - having it closed as "opinion-based" each time doesn't help answer it - and yet, every time it gets a "this should be closed because it is opinion-based" comment :/ – phry Feb 13 '23 at 22:41
  • I guess our opinions on whether this is opinion based differ ¯\_(ツ)_/¯ Maybe we can find common ground on “duplicate”? – Daniel Beck Feb 14 '23 at 13:39

2 Answers2

5

Context and Redux do two different things.

Context is a mechanism to pass a single, seldom-changing variable down the tree. Whenever that variable is changed, all consumers rerender, so it is best used to pass down things like a Theme, or a WebSocket connection used in many components. It's more useful for dependency injection.

Redux on the other hand is made for managing plain objects (e.g. a WebSocket wouldn't go in here) holding data and subscribing efficiently to granular changes within that data.

So it is likely you will use Context and a state mgmt library (there are also alternatives like MobX, Recoil, XState, Jotai, Zustand or Valtio) side-by-side, for different purposes. For more information, you can for example read this article.

phry
  • 35,762
  • 5
  • 67
  • 81
  • Thank you. Your answer has made me understand and given me new knowledge. For sockets use context. Got it! – YulePale Feb 13 '23 at 09:45
0

React's useContext hook and Redux are both state management tools, but they are designed to handle different needs in a React app.

Redux is a centralized store that can hold the entire state of an application, and its actions and reducers manage updates to the state. It's useful when you have complex or large state management needs, and you want to maintain a single source of truth for your state.

On the other hand, useContext hook is a simpler alternative to Redux, especially when your state needs are small or local. It provides a way to pass data from a parent component to its children components without having to pass the data down as props through every level. This can make your code more readable and maintainable.

In summary, you can use either useContext or Redux depending on the complexity and size of your state management needs. If you have simple state needs, you can use useContext, but if your state needs are more complex or large, you can use Redux to manage it more effectively.

Fahri Gunadi
  • 54
  • 4