Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/content/learn/passing-props-to-a-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -462,7 +462,7 @@ export default function Gallery() {
</li>
<li>
<b>Discovered: </b>
polonium (element)
polonium (chemical element)
</li>
</ul>
</section>
Expand Down
4 changes: 2 additions & 2 deletions src/content/learn/removing-effect-dependencies.md
Original file line number Diff line number Diff line change
Expand Up @@ -926,7 +926,7 @@ function ChatRoom() {

useEffect(() => {
const options = createOptions();
const connection = createConnection();
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
}, []); // ✅ All dependencies declared
Expand Down Expand Up @@ -1613,7 +1613,7 @@ label, button { display: block; margin-bottom: 5px; }

Your Effect is re-running because it depends on the `options` object. Objects can be re-created unintentionally, you should try to avoid them as dependencies of your Effects whenever possible.

The least invasive fix is to read `roomId` and `serverUrl` right outside the Effect, and then make the Effect depend on those primitive values (which can't change unintentionally). Inside the Effect, create an object and it pass to `createConnection`:
The least invasive fix is to read `roomId` and `serverUrl` right outside the Effect, and then make the Effect depend on those primitive values (which can't change unintentionally). Inside the Effect, create an object and pass it to `createConnection`:

<Sandpack>

Expand Down
2 changes: 0 additions & 2 deletions src/content/learn/state-a-components-memory.md
Original file line number Diff line number Diff line change
Expand Up @@ -1488,8 +1488,6 @@ Here is a fixed version that uses a regular `name` variable declared in the func
<Sandpack>

```js
import { useState } from 'react';

export default function FeedbackForm() {
function handleClick() {
const name = prompt('What is your name?');
Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/state-as-a-snapshot.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ When React re-renders a component:

1. React calls your function again.
2. Your function returns a new JSX snapshot.
3. React then updates the screen to match the snapshot you've returned.
3. React then updates the screen to match the snapshot your function returned.

<IllustrationBlock sequential>
<Illustration caption="React executing the function" src="/images/docs/illustrations/i_render1.png" />
Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/synchronizing-with-effects.md
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's clearer in this way, maybe I'm wrong?

Original file line number Diff line number Diff line change
Expand Up @@ -767,7 +767,7 @@ Buying is not caused by rendering; it's caused by a specific interaction. It sho
}
```

**This illustrates that if remounting breaks the logic of your application, this usually uncovers existing bugs.** From the user's perspective, visiting a page shouldn't be different from visiting it, clicking a link, and pressing Back. React verifies that your components abide by this principle by remounting them once in development.
**This illustrates that if remounting breaks the logic of your application, this usually uncovers existing bugs.** From a user's perspective, visiting a page shouldn't be different from visiting it, clicking a link, then pressing Back to view the page again. React verifies that your components abide by this principle by remounting them once in development.

## Putting it all together {/*putting-it-all-together*/}

Expand Down