Pushing State Down

Every yellow flash is a re-render. Interact with the demo, spot what shouldn't be flashing, then open the solution tab to see the fix.

1

Exercise 1 of 1

The Children Prop Escape Hatch

Pass expensive components as children to isolate them from state changes in the wrapper.

DataDashboard — interval state at root

IntervalSection renders: 1

ExpensiveStats renders: 1

  • Total Revenue: $48,230
  • Total Users: 12,847

This component does not use interval — but it still re-renders.

Click an interval button. ExpensiveStats flashes every time even though it doesn't use interval — it re-renders because its parent re-renders.