40
loading...
React Context or Redux? What's difference about rerendering (performance)?
The purpose is to develop some ideas in order to provoke a thinking for readers and for myself.
Happy reading.
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.
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.
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.
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.
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.
Written by Anthony Godin, LinkedIn.
40