리액트 컨텍스트 또는 Redux? 리렌더링(성능)의 차이점은 무엇입니까?

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.

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.

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)

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.

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.

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.

I've never used these tools. But I think it's the same rendering behaviour than 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.

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.