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.

Re-rendering in a hierarchy

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:

  • benefit from performance gains on your website,
  • stay away from bugs arising when we get in the way of React,
  • better understand how React works.

In this two-post series on React re-rendering…

Jonathan Boccara

Principal Engineer @Doctolib

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store