Skip to content

Commit

Permalink
Merge pull request #422 from reactjs/sync-b7bf6c16
Browse files Browse the repository at this point in the history
Sync with react.dev @ b7bf6c1
  • Loading branch information
ltmylinh authored May 15, 2024
2 parents 6d0cba3 + 4751afc commit 51d80ff
Show file tree
Hide file tree
Showing 6 changed files with 33 additions and 6 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@
"webpack-bundle-analyzer": "^4.5.0"
},
"engines": {
"node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
"node": ">=16.8.0"
},
"nextBundleAnalysis": {
"budget": null,
Expand Down
2 changes: 1 addition & 1 deletion src/content/blog/2022/03/29/react-v18.md
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@ With Strict Mode in React 18, React will simulate unmounting and remounting the
#### useTransition {/*usetransition*/}

`useTransition` and `startTransition` let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results). [See docs here](/reference/react/useTransition)
`useTransition` and `startTransition` let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results). [See docs here](/reference/react/useTransition).

#### useDeferredValue {/*usedeferredvalue*/}

Expand Down
2 changes: 1 addition & 1 deletion src/content/blog/2024/04/25/react-19.md
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ The async transition will immediately set the `isPending` state to true, make th
Actions automatically manage submitting data for you:

- **Pending state**: Actions provide a pending state that starts at the beginning of a request and automatically resets when the final state update is committed.
- **Optimistic updates**: Actions support the new [`useOptimistic`](#new-feature-optimistic-updates) hook so you can show users instant feedback while the requests are submitting.
- **Optimistic updates**: Actions support the new [`useOptimistic`](#new-hook-optimistic-updates) hook so you can show users instant feedback while the requests are submitting.
- **Error handling**: Actions provide error handling so you can display Error Boundaries when a request fails, and revert optimistic updates to their original value automatically.
- **Forms**: `<form>` elements now support passing functions to the `action` and `formAction` props. Passing functions to the `action` props use Actions by default and reset the form automatically after submission.

Expand Down
29 changes: 28 additions & 1 deletion src/content/learn/synchronizing-with-effects.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ Here and later in this text, capitalized "Effect" refers to the React-specific d

To write an Effect, follow these three steps:

1. **Declare an Effect.** By default, your Effect will run after every render.
1. **Declare an Effect.** By default, your Effect will run after every [commit](/learn/render-and-commit).
2. **Specify the Effect dependencies.** Most Effects should only re-run *when needed* rather than after every render. For example, a fade-in animation should only trigger when a component appears. Connecting and disconnecting to a chat room should only happen when the component appears and disappears, or when the chat room changes. You will learn how to control this by specifying *dependencies.*
3. **Add cleanup if needed.** Some Effects need to specify how to stop, undo, or clean up whatever they were doing. For example, "connect" needs "disconnect", "subscribe" needs "unsubscribe", and "fetch" needs either "cancel" or "ignore". You will learn how to do this by returning a *cleanup function*.

Expand Down Expand Up @@ -598,6 +598,33 @@ Usually, the answer is to implement the cleanup function. The cleanup function
Most of the Effects you'll write will fit into one of the common patterns below.
<Pitfall>
#### Don't use refs to prevent Effects from firing {/*dont-use-refs-to-prevent-effects-from-firing*/}
A common pitfall for preventing Effects firing twice in development is to use a `ref` to prevent the Effect from running more than once. For example, you could "fix" the above bug with a `useRef`:
```js {1,3-4}
const connectionRef = useRef(null);
useEffect(() => {
// 🚩 This wont fix the bug!!!
if (!connectionRef.current) {
connectionRef.current = createConnection();
connectionRef.current.connect();
}
}, []);
```
This makes it so you only see `"✅ Connecting..."` once in development, but it doesn't fix the bug.
When the user navigates away, the connection still isn't closed and when they navigate back, a new connection is created. As the user navigates across the app, the connections would keep piling up, the same as it would before the "fix".
To fix the bug, it is not enough to just make the Effect run once. The effect needs to work after re-mounting, which means the connection needs to be cleaned up like in the solution above.
See the examples below for how to handle common patterns.
</Pitfall>
### Controlling non-React widgets {/*controlling-non-react-widgets*/}
Sometimes you need to add UI widgets that aren't written to React. For example, let's say you're adding a map component to your page. It has a `setZoomLevel()` method, and you'd like to keep the zoom level in sync with a `zoomLevel` state variable in your React code. Your Effect would look similar to this:
Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/tutorial-tic-tac-toe.md
Original file line number Diff line number Diff line change
Expand Up @@ -2915,4 +2915,4 @@ If you have extra time or want to practice your new React skills, here are some
1. When someone wins, highlight the three squares that caused the win (and when no one wins, display a message about the result being a draw).
1. Display the location for each move in the format (row, col) in the move history list.
Throughout this tutorial, you've touched on React concepts including elements, components, props, and state. Now that you've seen how these concepts work when building a game, check out [Thinking in React](/learn/thinking-in-react) to see how the same React concepts work when build an app's UI.
Throughout this tutorial, you've touched on React concepts including elements, components, props, and state. Now that you've seen how these concepts work when building a game, check out [Thinking in React](/learn/thinking-in-react) to see how the same React concepts work when building an app's UI.
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/components/form.md
Original file line number Diff line number Diff line change
Expand Up @@ -386,7 +386,7 @@ export async function signUpNewUser(newEmail) {

</Sandpack>

Learn more about updating state from a form action with the [`useActionState`](/reference/react/hooks/useActionState) docs
Learn more about updating state from a form action with the [`useActionState`](/reference/react/useActionState) docs

### Handling multiple submission types {/*handling-multiple-submission-types*/}

Expand Down

0 comments on commit 51d80ff

Please sign in to comment.