From 1fa205704ec3841c4e85bc152aa04050b7e2195b Mon Sep 17 00:00:00 2001 From: Homyee King Date: Mon, 6 May 2024 13:17:59 +0800 Subject: [PATCH 1/7] Update react-19.md (#6838) --- src/content/blog/2024/04/25/react-19.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/blog/2024/04/25/react-19.md b/src/content/blog/2024/04/25/react-19.md index 0670eaa80..1ccffa1c8 100644 --- a/src/content/blog/2024/04/25/react-19.md +++ b/src/content/blog/2024/04/25/react-19.md @@ -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**: `
` 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. From 46437c2b12b14073d614b94befc012c21013327a Mon Sep 17 00:00:00 2001 From: Jack Spiva Date: Tue, 7 May 2024 10:25:41 -0500 Subject: [PATCH 2/7] Add missing period to React v18.0 blog post (#6842) --- src/content/blog/2022/03/29/react-v18.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/blog/2022/03/29/react-v18.md b/src/content/blog/2022/03/29/react-v18.md index 27899fdde..d21eeb1f5 100644 --- a/src/content/blog/2022/03/29/react-v18.md +++ b/src/content/blog/2022/03/29/react-v18.md @@ -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*/} From 0b9ae66066cccce35832c35097d6cafacd99c098 Mon Sep 17 00:00:00 2001 From: Ricky Date: Thu, 9 May 2024 10:43:42 -0400 Subject: [PATCH 3/7] Add docs for useRef no no (#6846) --- .../learn/synchronizing-with-effects.md | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index f1aa98438..4218171d4 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -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. + + +#### 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. + + + ### 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: From f1b0f862332334f0e9439ca996767ad648e064ea Mon Sep 17 00:00:00 2001 From: Linda Date: Thu, 9 May 2024 18:01:57 -0700 Subject: [PATCH 4/7] Fix typo on tutorial-tic-tac-toe.md (#6843) Change the tense of "build" to "building". --- src/content/learn/tutorial-tic-tac-toe.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index d37791456..f18ec4939 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -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. From f9b9b66e0bbba6f54a92d867555c8b8669774bec Mon Sep 17 00:00:00 2001 From: Batuhan Tomo <91488737+Rekl0w@users.noreply.github.com> Date: Fri, 10 May 2024 11:26:43 +0300 Subject: [PATCH 5/7] Fix #6852: navigation link fix (#6853) --- src/content/reference/react-dom/components/form.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index afdddc749..d5f656073 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -386,7 +386,7 @@ export async function signUpNewUser(newEmail) { -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*/} From 4f1d98577df19e3734fa66b8f0ca28a47dab49f7 Mon Sep 17 00:00:00 2001 From: Muhammad Saqib Date: Fri, 10 May 2024 19:19:44 +0500 Subject: [PATCH 6/7] Update synchronizing-with-effects.md (#6856) * Update synchronizing-with-effects.md Currently documentation says: By default, your Effect will run after every render. Which is in contrast with another section of the same page where it says: Effects run at the end of a commit after the screen updates * Update src/content/learn/synchronizing-with-effects.md --------- Co-authored-by: Ricky --- src/content/learn/synchronizing-with-effects.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 4218171d4..9ca109656 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -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*. From b7bf6c16fb3152626a71c115b3242df6eb93bc6e Mon Sep 17 00:00:00 2001 From: Batuhan Tomo <91488737+Rekl0w@users.noreply.github.com> Date: Fri, 10 May 2024 17:33:45 +0300 Subject: [PATCH 7/7] Fix Node.js version update at `package.json` (#6855) * Fix #6854: node.js version upgrade * Fix #6854: node.js version update --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ddbe92505..26bb39657 100644 --- a/package.json +++ b/package.json @@ -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,