Lesson 2.1

Why components re-render

A component renders again because its own state changed, because its parent rendered, or because a context it consumes changed.

5mAdvanced8k students

Overview

Three reasons, and only three

A component renders again because its own state changed, because its parent rendered, or because a context it consumes changed. Every mysterious re-render reduces to one of those, and naming which one comes first.

The second is the one people forget. A parent re-rendering re-renders its whole subtree by default, whether or not any prop actually differs, which is why an unrelated state variable at the top of a tree can cost you the entire page.

Identity is the other common culprit. An object or function created inline is a new value on every render, so any comparison against it always reports a change.

In this lesson you will:

  • Trace a render back to its trigger
  • Understand that a parent render renders its children
  • Recognise identity changes as a cause

Resources

Previous Lesson
Next Lesson
Why components re-render — React Performance Engineering — Vertex