Redux vs Context API + React Hooks - which wins in performance?

Question

Im curious which of mentioned tools could be better solution for better app performance. Which of them causes less re-renders?

Looks like ContextAPI causes re-render of whole component tree if any of context state changes.

Also what about Context API + React hooks? (useReducer).

I feel that redux would perform a lot better, maybe anyone has specific numbers who is winner in this category?

Moot point since Redux (react-redux) is built on the React Context API.... so between the two choices you present and ask about, React Context and React hooks are used regardless. The question is too broad and off-topic anyway. What "performance" are you wanting to consider one a winner over the other? Speed? Memory? Renders? Something else? This question needs quite a bit more focus. — Drew Reese
– Drew Reese, Commented Sep 10, 2022 at 7:26
The phrase "React-Redux is built on Context" is unfortunately a very misleading way to describe how this works! (and a common misconception) Yes, React-Redux does use Context internally... but only to pass down the Redux store instance, and not the current state value! This leads to very different update characteristics than Context. Please see my extensive post Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux) for more details on the differences. — markerikson
– markerikson, Commented Sep 10, 2022 at 23:02
@markerikson Fair enough, it was a gross over-simplification. The point I was trying to make was that a React context and hooks are used either way. — Drew Reese
– Drew Reese, Commented Sep 11, 2022 at 6:53
Basically when I say performance I mean re-renders, I see context api as big performance eater, as it is re-renders every time some of the state changes inside context. — Rollin
– Rollin, Commented Sep 11, 2022 at 14:32

Md Joynul Abedin · Accepted Answer · 2022-09-10 07:08:09Z

6

The popular opinion Redux is for large projects & Context API for small ones.

Both are excellent tools for their own specific niche, Redux is overkill just to pass data from parent to child & Context API truly shines in this case. When you have a lot of dynamic data Redux got your back!

The Context API could be used in place of Redux if you are just using it to prevent passing props down to deeply nested components, as it is designed specifically for this use case.

But there is no reason for you to stop using Redux if you already do ( centralizing your application's state, handling logic outside of components,predictable state container, using Redux DevTools to track when, where, why, and how your application's state changed, using plugins like Redux Form, Redux Saga, Redux Undo, Redux Persist, Redux Logger, etc.). None of these are accessible using the Context API.

edited Sep 10, 2022 at 7:08

answered Sep 10, 2022 at 7:07

Md Joynul Abedin

2503 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arman · Accepted Answer · 2022-09-10 08:55:18Z

3

If your application is large and has complex state management, then redux is a better choice as it'll make your application handier to manage states, Separate logic from UI, better code organization, easy debugging etc.

But if your application is a small or medium level application, go for Context API. As it requires minimal Setup and ships perfectly with React.

answered Sep 10, 2022 at 8:55

Arman

8215 silver badges15 bronze badges

Collectives™ on Stack Overflow

Redux vs Context API + React Hooks - which wins in performance?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related