Advantages of Redux Over React useContext() and useReducer() (with HOCs)

[thetipsyhacker]

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:

    const App = () => {
      return (
        <Provider1>
          <Provider2>
            <Provider3>
              <Layout>
                <Main />
              </Layout>
            </Provider3>
          </Provider2>
        </Provider1>
      )
    }

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() and useReducer() (with HOCs)?

[markerikson]

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, useReducer, and (React-)Redux in extensive detail. Please read it!

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, useState and useReducer. So, you're actually doing all the "state management" yourself - Context just gives you a way to pass it down the tree.

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 useReducer, Context, or Redux specifically. React-Redux's connect API is a HOC, but today we teach the React-Redux hook API as the default and discourage using connect.

I'd also recommend reading these additional posts:

• A (Mostly) Complete Guide to React Rendering Behavior
• Redux - Not Dead Yet!
• When (and when not) to Reach for Redux
• React, Redux, and Context Behavior.

[thetipsyhacker]

Thanks, @markerikson ! I believe I already came across your article in this Reddit post. Great article! :-)

I don't see a mention of the Higher Order Component technique recommended by React. The HOC pattern significantly increases readability and organization, and eliminates prop drilling. Does Redux have any advantages over this pattern (and perhaps useMemo() to avoid rerendering of entire component trees), other than the browser extension and saving time from having to write the extra code?

[markerikson]

@thetipsyhacker I... feel like you're mixing up some things that are completely unrelated to each other :(

Like I said, HOCs have nothing to do with whether you're using Context, useReducer, or Redux.

[thetipsyhacker]

@markerikson for more context (no pun intended), I've been looking at several articles like this one that combine the use of HOCs and native Context Providers.

Somebody on Reddit mentioned that another advantage of Redux is to avoid re-rendering of an entire component tree in large apps. With React alone, you'd have to memoize (useMemo()) a lot of your Context consumer.

[markerikson]

@thetipsyhacker : I'd really encourage you to set aside any considerations of "HOCs" in this discussion. It really isn't relevant.

As I described in my linked posts, the primary differences between useReducer + Context and Redux are around:

• Where the state lives (inside of a React component or in an external store)
• How the change results get propagated (via React re-rendering, or via external subscriptions)
• What additional capabilities are tied into the process of handling the action (none, in the case of useReducer, or middleware in the case of Redux)

Additionally, per your comment on Reddit, there's some confusion there. First, The useMemo() hook has no relation to context re-rendering behavior (other than occasionally helping when used in the parent that is rendering the <MyContext.Provider>). Second, the React.memo() HOC will help prevent React's default recursive re-rendering from continuing... but it does not stop a context consumer from rendering if the context value is updated.