In the first post of our series on the subtle aspects of re-rendering in React, we saw how React behaves with function calls and lazy evaluation.
To dive deeper in React re-rendering we’ll see now how dynamic children, memos and constant functions impact rendering.
Understanding these aspects of React will make you reap performance gains for your website, stay away from a whole class of bugs, and get a deeper understanding of React.
To understand the following examples, you need to be familiar with React contexts.
Consider the following code:
Context contains a
CountContextProvider component and passes it one…
Like many web companies we use React at Doctolib, and like all web companies we like a website that renders fast.
The best way to improve performance, in a website or anywhere else, is to avoid doing work. This is exactly what React rendering optimizations are for: rendering just the components that need it, and nothing more.
As a developer, if you understand React re-rendering optimizations, you will:
In this two-post series on React re-rendering…
Principal Engineer @Doctolib