Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixed: caps for React concepts #6720

Open
wants to merge 60 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
60 commits
Select commit Hold shift + click to select a range
b14645d
Update manipulating-the-dom-with-refs.md
LogicalGuy77 Mar 27, 2024
08af256
Update managing-state.md
LogicalGuy77 Mar 27, 2024
4708bd7
Update importing-and-exporting-components.md
LogicalGuy77 Mar 27, 2024
10df568
Update index.md
LogicalGuy77 Mar 27, 2024
aed968a
Update prefetchDNS.md
LogicalGuy77 Mar 27, 2024
c83f719
Update Component.md
LogicalGuy77 Mar 27, 2024
dc82f4f
Update Profiler.md
LogicalGuy77 Mar 27, 2024
3234915
Update components-and-hooks-must-be-pure.md
LogicalGuy77 Mar 27, 2024
1d56b27
Merge branch 'reactjs:main' into LogicalGuy77-patch-1
LogicalGuy77 Mar 27, 2024
8fd732e
Merge branch 'reactjs:main' into main
LogicalGuy77 Mar 27, 2024
60b6cef
reverted manipulating-the-dom-with-refs.md
LogicalGuy77 Mar 27, 2024
54464b4
reverted managing-state.md
LogicalGuy77 Mar 27, 2024
8ee2e35
reverted importing-and-exporting-components.md
LogicalGuy77 Mar 27, 2024
4f118f8
reverted index.md
LogicalGuy77 Mar 27, 2024
877c37b
reverted Component.md
LogicalGuy77 Mar 27, 2024
9df3166
reverted Profiler.md
LogicalGuy77 Mar 27, 2024
845f60c
reverted components-and-hooks-must-be-pure.md
LogicalGuy77 Mar 27, 2024
cb122e1
Updated State in adding-interactivity.md
LogicalGuy77 Mar 27, 2024
199116e
Updated State in choosing-the-state-structure.md
LogicalGuy77 Mar 27, 2024
05b686d
Updated State in escape-hatches.md
LogicalGuy77 Mar 27, 2024
f24ca46
Updated State in extracting-state-logic-into-a-reducer.md
LogicalGuy77 Mar 27, 2024
80adf78
Updated State in index.md
LogicalGuy77 Mar 27, 2024
76af2b7
Updated State in keeping-components-pure.md
LogicalGuy77 Mar 27, 2024
c8af9da
Updated State in lifecycle-of-reactive-effects.md
LogicalGuy77 Mar 27, 2024
dbd7e32
Updated State in managing-state.md
LogicalGuy77 Mar 27, 2024
3e5c123
Updated State in manipulating-the-dom-with-refs.md
LogicalGuy77 Mar 27, 2024
a2695ff
Updated State in passing-data-deeply-with-context.md
LogicalGuy77 Mar 27, 2024
f44319d
Updated State in passing-props-to-a-component.md
LogicalGuy77 Mar 27, 2024
61c22e4
Updated State in preserving-and-resetting-state.md
LogicalGuy77 Mar 27, 2024
2aead23
Updated State in queueing-a-series-of-state-updates.md
LogicalGuy77 Mar 27, 2024
71c1da6
Updated State in reacting-to-input-with-state.md
LogicalGuy77 Mar 27, 2024
408b57a
Updated State in referencing-values-with-refs.md
LogicalGuy77 Mar 27, 2024
1215a13
Updated State in removing-effect-dependencies.md
LogicalGuy77 Mar 27, 2024
6751b1b
Updated State in render-and-commit.md
LogicalGuy77 Mar 27, 2024
99085c2
Updated State in reusing-logic-with-custom-hooks.md
LogicalGuy77 Mar 27, 2024
01ea2af
Merge pull request #1 from LogicalGuy77/main
LogicalGuy77 Mar 27, 2024
38da138
Updated State in scaling-up-with-reducer-and-context.md
LogicalGuy77 Mar 28, 2024
2db49c9
Updated State in separating-events-from-effects.md
LogicalGuy77 Mar 28, 2024
fa9dcce
Updated State in sharing-state-between-components.md
LogicalGuy77 Mar 28, 2024
013afc3
Updated State in state-a-components-memory.md
LogicalGuy77 Mar 28, 2024
fda2355
Updated State in state-as-a-snapshot.md
LogicalGuy77 Mar 28, 2024
674f758
Updated State in synchronizing-with-effects.md
LogicalGuy77 Mar 28, 2024
666a555
Updated State in thinking-in-react.md
LogicalGuy77 Mar 28, 2024
a3a5eb5
Updated State in tutorial-tic-tac-toe.md
LogicalGuy77 Mar 28, 2024
5a62ad2
Updated State in typescript.md
LogicalGuy77 Mar 28, 2024
513b498
Updated State in updating-arrays-in-state.md
LogicalGuy77 Mar 28, 2024
b0753d8
Updated State in updating-objects-in-state.md
LogicalGuy77 Mar 28, 2024
01bd5a1
Updated State in you-might-not-need-an-effect.md
LogicalGuy77 Mar 28, 2024
e3d3cb0
Updated State in useFormState.md
LogicalGuy77 Mar 28, 2024
0a44059
Updated State in useFormStatus.md
LogicalGuy77 Mar 28, 2024
9bd4ea3
Updated State in components-and-hooks-must-be-pure.md
LogicalGuy77 Mar 28, 2024
35215b7
Updated State in index.md
LogicalGuy77 Mar 28, 2024
7fddc9d
added caps to State
LogicalGuy77 Mar 28, 2024
224bdb7
Updated State caps for React concepts
LogicalGuy77 Mar 28, 2024
8e5e62e
Updated State caps
LogicalGuy77 Mar 28, 2024
5752c73
State caps for React concepts
LogicalGuy77 Mar 28, 2024
89faece
State caps for React concepts
LogicalGuy77 Mar 28, 2024
4264b6e
caps for React State concept
LogicalGuy77 Mar 28, 2024
f8e45e4
caps for React concept State
LogicalGuy77 Mar 28, 2024
7682045
caps for React concepts
LogicalGuy77 Mar 28, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
38 changes: 19 additions & 19 deletions src/content/learn/adding-interactivity.md
Expand Up @@ -4,19 +4,19 @@ title: Adding Interactivity

<Intro>

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.

</Intro>

<YouWillLearn isChapter={true}>

* [How to handle user-initiated events](/learn/responding-to-events)
* [How to make components "remember" information with state](/learn/state-a-components-memory)
* [How to make components "remember" information with State](/learn/state-a-components-memory)
* [How React updates the UI in two phases](/learn/render-and-commit)
* [Why state doesn't update right after you change it](/learn/state-as-a-snapshot)
* [How to queue multiple state updates](/learn/queueing-a-series-of-state-updates)
* [How to update an object in state](/learn/updating-objects-in-state)
* [How to update an array in state](/learn/updating-arrays-in-state)
* [Why State doesn't update right after you change it](/learn/state-as-a-snapshot)
* [How to queue multiple State updates](/learn/queueing-a-series-of-state-updates)
* [How to update an object in State](/learn/updating-objects-in-state)
* [How to update an array in State](/learn/updating-arrays-in-state)

</YouWillLearn>

Expand Down Expand Up @@ -74,16 +74,16 @@ Read **[Responding to Events](/learn/responding-to-events)** to learn how to add

## State: a component's memory {/*state-a-components-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" 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.*
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);
const [showMore, setShowMore] = useState(false);
```

Here is how an image gallery uses and updates state on click:
Here is how an image gallery uses and updates State on click:

<Sandpack>

Expand Down Expand Up @@ -257,7 +257,7 @@ Read **[Render and Commit](/learn/render-and-commit)** to learn the lifecycle of

## State as a snapshot {/*state-as-a-snapshot*/}

Unlike regular JavaScript variables, React state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. This can be surprising at first!
Unlike regular JavaScript variables, React State behaves more like a snapshot. Setting it does not change the State variable you already have, but instead triggers a re-render. This can be surprising at first!

```js
console.log(count); // 0
Expand Down Expand Up @@ -314,11 +314,11 @@ label, textarea { margin-bottom: 10px; display: block; }

<LearnMore path="/learn/state-as-a-snapshot">

Read **[State as a Snapshot](/learn/state-as-a-snapshot)** to learn why state appears "fixed" and unchanging inside the event handlers.
Read **[State as a Snapshot](/learn/state-as-a-snapshot)** to learn why State appears "fixed" and unchanging inside the event handlers.

</LearnMore>

## Queueing a series of state updates {/*queueing-a-series-of-state-updates*/}
## Queueing a series of State updates {/*queueing-a-series-of-state-updates*/}

This component is buggy: clicking "+3" increments the score only once.

Expand Down Expand Up @@ -354,7 +354,7 @@ button { display: inline-block; margin: 10px; font-size: 20px; }

</Sandpack>

[State as a Snapshot](/learn/state-as-a-snapshot) explains why this is happening. Setting state requests a new re-render, but does not change it in the already running code. So `score` continues to be `0` right after you call `setScore(score + 1)`.
[State as a Snapshot](/learn/state-as-a-snapshot) explains why this is happening. Setting State requests a new re-render, but does not change it in the already running code. So `score` continues to be `0` right after you call `setScore(score + 1)`.

```js
console.log(score); // 0
Expand All @@ -366,7 +366,7 @@ setScore(score + 1); // setScore(0 + 1);
console.log(score); // 0
```

You can fix this by passing an *updater function* when setting state. Notice how replacing `setScore(score + 1)` with `setScore(s => s + 1)` fixes the "+3" button. This lets you queue multiple state updates.
You can fix this by passing an *updater function* when setting State. Notice how replacing `setScore(score + 1)` with `setScore(s => s + 1)` fixes the "+3" button. This lets you queue multiple State updates.

<Sandpack>

Expand Down Expand Up @@ -402,13 +402,13 @@ button { display: inline-block; margin: 10px; font-size: 20px; }

<LearnMore path="/learn/queueing-a-series-of-state-updates">

Read **[Queueing a Series of State Updates](/learn/queueing-a-series-of-state-updates)** to learn how to queue a sequence of state updates.
Read **[Queueing a Series of State Updates](/learn/queueing-a-series-of-state-updates)** to learn how to queue a sequence of State updates.

</LearnMore>

## Updating objects in state {/*updating-objects-in-state*/}
## Updating objects in State {/*updating-objects-in-state*/}

State can hold any kind of JavaScript value, including objects. But you shouldn't change objects and arrays that you hold in the React state directly. Instead, when you want to update an object and array, you need to create a new one (or make a copy of an existing one), and then update the state to use that copy.
State can hold any kind of JavaScript value, including objects. But you shouldn't change objects and arrays that you hold in the React State directly. Instead, when you want to update an object and array, you need to create a new one (or make a copy of an existing one), and then update the State to use that copy.

Usually, you will use the `...` spread syntax to copy objects and arrays that you want to change. For example, updating a nested object could look like this:

Expand Down Expand Up @@ -637,9 +637,9 @@ Read **[Updating Objects in State](/learn/updating-objects-in-state)** to learn

</LearnMore>

## Updating arrays in state {/*updating-arrays-in-state*/}
## Updating arrays in State {/*updating-arrays-in-state*/}

Arrays are another type of mutable JavaScript objects you can store in state and should treat as read-only. Just like with objects, when you want to update an array stored in state, you need to create a new one (or make a copy of an existing one), and then set state to use the new array:
Arrays are another type of mutable JavaScript objects you can store in State and should treat as read-only. Just like with objects, when you want to update an array stored in State, you need to create a new one (or make a copy of an existing one), and then set State to use the new array:

<Sandpack>

Expand Down