Build Your Mental Model of React’s Rendering Behavior

Using a counter app, Charlotte distinguishes React elements from fibers. JSX creates React element objects, and React uses them to build a fiber tree that stores component props, state, and other rendering information. React keeps the fibers between renders; React elements are temporary.

When the counter button calls setState, React creates a work tree and flags the Counter fiber for an update. Charlotte describes two checks: a component renders if it was flagged or if its props differ from the previous render. Since Counter creates new elements for Value and Button, their props change and they render too.

Charlotte simplifies the process into three causes: the component's state changed, its parent rendered, or a context value it uses changed. A child with no props can still render when its parent creates it again, because a new empty props object has a different reference. React.memo can prevent that render by comparing props shallowly.

When Counter receives Title as a prop and reuses the same React element, a Counter state update does not create a new Title fiber, so Title does not render. The same applies to elements passed under other prop names. If the component that created the element renders again, it creates a new element and Title can render.

Charlotte considers returning a Counter element created outside its parent. Reusing that element can avoid a child render when the parent renders, but she recommends React.memo for heavy components and notes that the technique only works with static props. If the same element is returned twice, React creates separate fibers, so each counter has independent state.