React · Senior · Question 60 of 75

Why doesn't `<ExpensiveTree />` re-render when `ColorPicker` state changes here?

function ColorPicker({ children }) {
  const [color, setColor] = useState("red");
  return <div style={{ color }}>{children}</div>;
}
// <ColorPicker><ExpensiveTree /></ColorPicker>

✓Correct answer: children was created by the parent, so its element is the same object when ColorPicker re-renders
2React never re-renders children
3style prevents re-renders

Explanation

Passing JSX as children ("lifting content up") is a memo-free optimization: only the parent that created the element decides when it changes.

Further reading

Test yourself

Take the React · Senior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.