Advantages of Redux Over React useContext() and useReducer() (with HOCs) #4479
Replies: 1 comment 4 replies
-
This is a very frequently asked topic :) Which is why I've already written a several-thousand-word article that explains the differences and technical details between Context, Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux) As an overview: Context and Redux are very different tools that solve different problems, with some overlap. Context is not a "state management" tool. It's a Dependency Injection mechanism, whose only purpose is to make a single value accessible to a nested tree of React components. It's up to you to decide what that value is, and how it's created. Typically, that's done using data from React component state, ie, Redux is a library and a pattern for separating your state update logic from the rest of your app, and making it easy to trace when/where/why/how your state has changed. It also gives your whole app the ability to access any piece of state in any component. In addition, there are some distinct differences between how Context and (React-)Redux pass along updates. Context has some major perf limitations - in particular, any component that consumes a context will be forced to re-render, even if it only cares about part of the context value. Context is a great tool by itself, and I use it frequently in my own apps. But, Context doesn't "replace Redux". Sure, you can use both of them to pass data down, but they're not the same thing. It's like asking "Can I replace a hammer with a screwdriver?". No, they're different tools, and you use them to solve different problems. Also, note that HOCs have nothing to do with either I'd also recommend reading these additional posts: |
Beta Was this translation helpful? Give feedback.
-
Why would you use the external Redux library over React's own useContext() and useReducer() hooks, with the Higher-Order Component (HOC) pattern?
Installing and importing an additional, large library such as Redux increases the size of your application and consumes more resources. Redux is essentially using the HOC pattern, takes advantage of the JavaScript reducer pattern, and uses a "context" to keep tack of global state.
React HOCs take care the tree hell issue created by context providers, in large apps:
I've tried to do research on the differences and pros/cons, but haven't come to a conclusion. The only major advantage I see with using Redux is that it has its own browser extension, Redux DevTools, that's helpful for debugging and inspecting global state and HOCs. In your opinion, which is better to use and why? Redux, or React
useContext()
anduseReducer()
(with HOCs)?Beta Was this translation helpful? Give feedback.
All reactions