From 4859a63ace1219e3b2a42c40b5e5dae297a532dd Mon Sep 17 00:00:00 2001 From: Dex Date: Fri, 18 Sep 2026 23:46:19 +0200 Subject: [PATCH 1/5] Capitalize State in adding-interactivity.md --- src/content/learn/adding-interactivity.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index 0e84780fa60..9c10a98989c 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -4,7 +4,7 @@ title: Adding Interactivity -Some things on the screen update in response to user input. For example, clicking an image gallery switches the active image. In React, data that changes over time is called *state.* You can add state to any component, and update it as needed. In this chapter, you'll learn how to write components that handle interactions, update their state, and display different output over time. +Some things on the screen update in response to user input. For example, clicking an image gallery switches the active image. In React, data that changes over time is called *State.* You can add state to any component, and update it as needed. In this chapter, you'll learn how to write components that handle interactions, update their state, and display different output over time. @@ -76,7 +76,7 @@ Read **[Responding to Events](/learn/responding-to-events)** to learn how to add Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" puts a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called *state.* -You can add state to a component with a [`useState`](/reference/react/useState) Hook. *Hooks* are special functions that let your components use React features (state is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it. +You can add state to a component with a [`useState`](/reference/react/useState) Hook. *Hooks* are special functions that let your components use React features (State is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it. ```js const [index, setIndex] = useState(0); From 20ec0c3d4e801324d039908ce422e00651c58a35 Mon Sep 17 00:00:00 2001 From: Dex Date: Fri, 18 Sep 2026 23:46:21 +0200 Subject: [PATCH 2/5] Capitalize State in state-a-components-memory.md --- src/content/learn/state-a-components-memory.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md index 0637dd173d4..d2a0201ccb2 100644 --- a/src/content/learn/state-a-components-memory.md +++ b/src/content/learn/state-a-components-memory.md @@ -4,7 +4,7 @@ title: "State: A Component's Memory" -Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" should put a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called *state*. +Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" should put a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called *State*. @@ -893,7 +893,7 @@ button { This is what makes state different from regular variables that you might declare at the top of your module. State is not tied to a particular function call or a place in the code, but it's "local" to the specific place on the screen. You rendered two `` components, so their state is stored separately. -Also notice how the `Page` component doesn't "know" anything about the `Gallery` state or even whether it has any. Unlike props, **state is fully private to the component declaring it.** The parent component can't change it. This lets you add state to any component or remove it without impacting the rest of the components. +Also notice how the `Page` component doesn't "know" anything about the `Gallery` state or even whether it has any. Unlike props, **State is fully private to the component declaring it.** The parent component can't change it. This lets you add state to any component or remove it without impacting the rest of the components. What if you wanted both galleries to keep their states in sync? The right way to do it in React is to *remove* state from child components and add it to their closest shared parent. The next few pages will focus on organizing state of a single component, but we will return to this topic in [Sharing State Between Components.](/learn/sharing-state-between-components) From 5d7fee8003f4b4475e7a3e7576126db05e487239 Mon Sep 17 00:00:00 2001 From: Dex Date: Fri, 18 Sep 2026 23:46:23 +0200 Subject: [PATCH 3/5] Capitalize State in state-as-a-snapshot.md --- src/content/learn/state-as-a-snapshot.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/state-as-a-snapshot.md b/src/content/learn/state-as-a-snapshot.md index df4eddbd677..38aa71ecd83 100644 --- a/src/content/learn/state-as-a-snapshot.md +++ b/src/content/learn/state-as-a-snapshot.md @@ -87,7 +87,7 @@ When React re-renders a component: -As a component's memory, state is not like a regular variable that disappears after your function returns. State actually "lives" in React itself--as if on a shelf!--outside of your function. When React calls your component, it gives you a snapshot of the state for that particular render. Your component returns a snapshot of the UI with a fresh set of props and event handlers in its JSX, all calculated **using the state values from that render!** +As a component's memory, State is not like a regular variable that disappears after your function returns. State actually "lives" in React itself--as if on a shelf!--outside of your function. When React calls your component, it gives you a snapshot of the state for that particular render. Your component returns a snapshot of the UI with a fresh set of props and event handlers in its JSX, all calculated **using the state values from that render!** From c700d01a59048a3f0e56c73292f6987b9f0f7541 Mon Sep 17 00:00:00 2001 From: Dex Date: Fri, 18 Sep 2026 23:46:25 +0200 Subject: [PATCH 4/5] Capitalize State in useReducer.md --- src/content/reference/react/useReducer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useReducer.md b/src/content/reference/react/useReducer.md index 404ebb08770..ec4d62195d2 100644 --- a/src/content/reference/react/useReducer.md +++ b/src/content/reference/react/useReducer.md @@ -956,7 +956,7 @@ function handleClick() { } ``` -This is because [states behaves like a snapshot.](/learn/state-as-a-snapshot) Updating state requests another render with the new state value, but does not affect the `state` JavaScript variable in your already-running event handler. +This is because [State behaves like a snapshot.](/learn/state-as-a-snapshot) Updating state requests another render with the new state value, but does not affect the `state` JavaScript variable in your already-running event handler. If you need to guess the next state value, you can calculate it manually by calling the reducer yourself: From ed3e0cc33c505f100e84f5497394da8d9a970ed6 Mon Sep 17 00:00:00 2001 From: Dex Date: Fri, 18 Sep 2026 23:46:27 +0200 Subject: [PATCH 5/5] Capitalize State in useState.md --- src/content/reference/react/useState.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index 21911f0ad20..bfb66abc536 100644 --- a/src/content/reference/react/useState.md +++ b/src/content/reference/react/useState.md @@ -420,7 +420,7 @@ h1 { display: block; margin: 10px; } ### Updating objects and arrays in state {/*updating-objects-and-arrays-in-state*/} -You can put objects and arrays into state. In React, state is considered read-only, so **you should *replace* it rather than *mutate* your existing objects**. For example, if you have a `form` object in state, don't mutate it: +You can put objects and arrays into state. In React, State is considered read-only, so **you should *replace* it rather than *mutate* your existing objects**. For example, if you have a `form` object in state, don't mutate it: ```js // 🚩 Don't mutate an object in state like this: @@ -1165,7 +1165,7 @@ function handleClick() { } ``` -This is because [states behaves like a snapshot.](/learn/state-as-a-snapshot) Updating state requests another render with the new state value, but does not affect the `count` JavaScript variable in your already-running event handler. +This is because [State behaves like a snapshot.](/learn/state-as-a-snapshot) Updating state requests another render with the new state value, but does not affect the `count` JavaScript variable in your already-running event handler. If you need to use the next state, you can save it in a variable before passing it to the `set` function: