18 Oct 2021

A Visual Guide to React Rendering - Cheat Sheet

When does a React component re-render? What can cause re-renders, and how to prevent unnecessary renders? Here is a quick cheat sheet you can refer to whenever you find yourself asking these questions.

Standard rendering and memo

By default, when the state of a component changes, that component and all its children re-render. You can wrap a React component with memo to prevent an entire subtree from re-rendering.

Primitive vs Non-primitive props

Non-primitive values in JavaScript are compared by reference.

{display: "flex"} === {display: "flex"} // false

Keep this in mind when passing props to memoized components. Memoized components re-render when their props change.

Stable reference with useMemo

You can preserve a reference to a non-primitive value with useMemo. It won't change on re-renders.

Stable reference with useCallback

You can preserve a reference to a function with useCallback.

Rendering and Context

The component right under your context provider should probably use memo

Rendering and DOM

React component render does not mean DOM update. React is smart enough to update only those parts of the DOM that need to change.

Articles on the topic:

• A (Mostly) Complete Guide to React Rendering Behavior - Mark Erikson
• Fix the slow render before you fix the re-render - Kent C. Dodds
• Before You memo() - Dan Abramov