Skip to content

Commit 96dabfe

Browse files
authored
Update state-as-a-snapshot.md
## 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: 1. **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**. 2. **Event handlers** do not get "calculated" per render but rather **capture the state from the moment they were created**. Unless wrapped in [`useCallback`](https://react.dev/reference/react/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.
1 parent a42121e commit 96dabfe

File tree

1 file changed

+1
-1
lines changed

1 file changed

+1
-1
lines changed

src/content/learn/state-as-a-snapshot.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ Let's take a closer look at the relationship between state and rendering.
7171

7272
## Rendering takes a snapshot in time {/*rendering-takes-a-snapshot-in-time*/}
7373

74-
["Rendering"](/learn/render-and-commit#step-2-react-renders-your-components) means that React is calling your component, which is a function. The JSX you return from that function is like a snapshot of the UI in time. Its props, event handlers, and local variables were all calculated **using its state at the time of the render.**
74+
["Rendering"](/learn/render-and-commit#step-2-react-renders-your-components) means that React is calling your component, which is a function. The JSX you return from that function is like a snapshot of the UI in time. 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**.
7575

7676
Unlike a photograph or a movie frame, the UI "snapshot" you return is interactive. It includes logic like event handlers that specify what happens in response to inputs. React updates the screen to match this snapshot and connects the event handlers. As a result, pressing a button will trigger the click handler from your JSX.
7777

0 commit comments

Comments
 (0)