React Context or Redux? What's difference about rerendering (performance)?

Table of Contents

1. 🎯 Purpose
2. 🧸 Demo app
3. 🗽 How to share a state
   • Share a state by Props
     • Illustration
   • Share a state by React Context
     • Illustration
   • Share a state by Redux
     • Illustration
   • Share a state with other tools like Mobx, Recoil etc
4. 🎦 Rendering demonstration vidéo - Props vs React Context vs Redux
5. ❓So?
6. 🧑‍🚀 Further
7. 📖 Some Reading

---

The purpose is to develop some ideas in order to provoke a thinking for readers and for myself.
Happy reading.

---

🎯 Purpose

What's the difference between React Context and Redux according to performance?

The question "Which one is the best to use for a better productivity/code?" is an other question that we don't looking for an answer here.

🧸 Demo app

To illustrate this article, I created a github project that you can clone and execute on your own computer.

You can check it out if you want but it's not necessary to understand this article.

https://github.com/AnthoGdn/labo_redux_vs_react-context

🗽 How to share a state

With React, we have some possibilities to share a state into all components of the application. We can use Props, React Context, Redux, Mobx, Recoil etc...

You can find some code examples on my github project. (shared above)

Share a state by Props

The idea is to create a state into a component (we name it " common ancestor" here) and share it to its children. We need to share "setter functions" too.

const [text, setText] = useState('')
// setText is a setter.

Every times we use a setter to change state, it's going to change the state into all common ancestor component, so it's going to rerender (paints again view) ancestor component and all its children.

⚠️ It could be bad for performance if the page contains heavy graphic elements and graphic computations.

Illustration

Share a state by React Context

React Context is exactly the same that Props. It's just syntactic sugar.

Every times we modify state into common ancestor component, it's rerender common ancestor component and all its children.

⚠️ It could be bad for performance if the page contains heavy graphic elements and graphic computations.

Illustration

Share a state by Redux

We branch a state to an ancestor component. React will not rerender common ancestor. It will rerender only component which use the part of the state that change.

⚠️ The behaviour is not the same that React Context.

Illustrations

Share a state with other tools like Mobx, Recoil etc

I've never used these tools. But I think it's the same rendering behaviour than Redux. 🤷

https://recoiljs.org
https://mobx.js.org

🎦 Rendering demonstration vidéo - Props vs React Context vs Redux

We can see the result of the 3 rerendering when we change the state with props, React Context and Redux.
You can see that with Redux, component 1 and 3 are not rerendering when we change state.

❓So?

People asks me sometimes witch one is better to use. What's the best?

I think there is no best. It depends of the context of your application.

Now, you know what's the behaviour of these tools on the rendering of your components.

According of the context of your application, it's possible that one of these tools be better than the other.

• If your state will not change often in the user navigation, so you can use what you want (rendering thinking).
• If your state will change often, it could be better to use Redux, specially if your "ancestor component" contains heavy graphic elements. For example, it's probably not a good idea to use React Context in a messaging or websocket or Server-Sent Events, because state could change a lot in short time. 🤷

Don't forget you can use React Context and Redux in the same application. Some people can say it's not recommended to use both in same application but why not? Using Redux for specific business logic of your product and using React Context for an other. Why not because React Context is included in React and it's just syntactic sugar of props. It costs no more to use it if you want to. 🤷

Tips: It's probably not a big deal sometimes to rerender components for nothing with React Context. The most important that users don't feel it. Don't over engineer is you don't need to.

Again:
The question "Which one is the best to use for a better productivity/code?" is another question that we don't looking for an answer here.

🧑‍🚀 Further

• This point of view is theoretical. I didn't measure performance and demonstrate performance problem with React Context. It could be a purpose for a next article why not. 🤷

• Also, it's possible to use React Memo with React Context to avoid useless rerendering but it could be exhausting to use than Redux don't you think? 🤷

• There is no need anymore to use global state to store http response data. For this, there exists library to fetch, cache and update data. React Query is great for that. Or Apollo client for Graphql http requests.

📖 Some Reading

Context - React

Redux - A predictable state container for JavaScript apps. | Redux

How to destroy your app performance using React contexts

---

Written by Anthony Godin, LinkedIn.