react.dev
react.dev copied to clipboard
Update state-as-a-snapshot.md
trafficstars
Fix misleading explanation about props and event handlers in rendering
Description
This PR updates the explanation of how React handles props, event handlers, and local variables during rendering. The original text stated:
"Its props, event handlers, and local variables were all calculated using its state at the time of the render."
However, this is misleading because:
- Props are not calculated from a component's state. They are passed from the parent component and only reflect the state of the parent at the time of its last render.
- Event handlers do not get "calculated" per render but rather capture the state from the moment they were created. Unless wrapped in
useCallback, they will be re-created on every render but will still close over the state at the time of their creation.
Updated text:
Local variables and event handlers capture the state from the moment the component rendered. Props are received from the parent and reflect the parent's state at the time of the parent’s last render.
Why this change?
The new phrasing clarifies that:
- Props come from the parent and are not derived from state.
- Event handlers reference the state of the render in which they were created.
- Local variables are tied to the specific render snapshot.
This should prevent confusion, especially for developers who might misinterpret it as meaning that props are calculated from state.