What causes React to re-render?

These things cause a re-render

A component re-renders either because:

• One of its state variables changed.
• The state of a parent component in the component hierarchy changed which caused all of that parent’s children to re-render, including the current component.
• A piece of React.Context that the component consumes has changed.
• A piece of React.Context that one of the component’s parents consumes has changed.

Misconception: Prop changes do not cause a re-render

See above for the things that cause a re-render. Prop changes aren’t in that list.

Links

• Why React re-renders – Josh Comeau