From a220bb3f21170210fb37375f349c943150a5364d Mon Sep 17 00:00:00 2001 From: k8o <61353435+k35o@users.noreply.github.com> Date: Thu, 22 Aug 2024 16:46:36 +0900 Subject: [PATCH 01/18] docs: replace check mark emoji to check mark button emoji (#7121) --- .../blog/2023/03/16/introducing-react-dev.md | 4 +-- src/content/learn/conditional-rendering.md | 32 +++++++++---------- src/content/learn/describing-the-ui.md | 2 +- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md index 2498f40dc..c4da2b61f 100644 --- a/src/content/blog/2023/03/16/introducing-react-dev.md +++ b/src/content/blog/2023/03/16/introducing-react-dev.md @@ -269,7 +269,7 @@ Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); } @@ -307,7 +307,7 @@ export default function PackingList() { function Item({ name, isPacked }) { return (
  • - {name} {isPacked ? '✔' : '❌'} + {name} {isPacked ? '✅' : '❌'}
    • ); } diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md index 895d610d3..95be5d2e0 100644 --- a/src/content/learn/conditional-rendering.md +++ b/src/content/learn/conditional-rendering.md @@ -52,13 +52,13 @@ export default function PackingList() { -Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✔) to packed items if `isPacked={true}`. +Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✅) to packed items if `isPacked={true}`. You can write this as an [`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) like so: ```js if (isPacked) { - return
  • {name} ✔
    • ; + return
  • {name} ✅
    • ; } return
  • {name}
    • ; ``` @@ -70,7 +70,7 @@ If the `isPacked` prop is `true`, this code **returns a different JSX tree.** Wi ```js function Item({ name, isPacked }) { if (isPacked) { - return
  • {name} ✔
    • ; + return
  • {name} ✅
    • ; } return
  • {name}
    • ; } @@ -159,7 +159,7 @@ In practice, returning `null` from a component isn't common because it might sur In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output: ```js -
  • {name} ✔
    • +
  • {name} ✅
    • ``` is very similar to @@ -172,7 +172,7 @@ Both of the conditional branches return `
  • ...
    • `: ```js if (isPacked) { - return
  • {name} ✔
    • ; + return
  • {name} ✅
    • ; } return
  • {name}
    • ; ``` @@ -187,7 +187,7 @@ Instead of this: ```js if (isPacked) { - return
  • {name} ✔
    • ; + return
  • {name} ✅
    • ; } return
  • {name}
    • ; ``` @@ -197,12 +197,12 @@ You can write this: ```js return (
  • - {isPacked ? name + ' ✔' : name} + {isPacked ? name + ' ✅' : name}
    • ); ``` -You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✔'`, otherwise (`:`) render `name`"*. +You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✅'`, otherwise (`:`) render `name`"*. @@ -222,7 +222,7 @@ function Item({ name, isPacked }) {
  • {isPacked ? ( - {name + ' ✔'} + {name + ' ✅'} ) : ( name @@ -265,7 +265,7 @@ Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) o ```js return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); ``` @@ -280,7 +280,7 @@ Here it is in action: function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); } @@ -337,7 +337,7 @@ Use an `if` statement to reassign a JSX expression to `itemContent` if `isPacked ```js if (isPacked) { - itemContent = name + " ✔"; + itemContent = name + " ✅"; } ``` @@ -357,7 +357,7 @@ This style is the most verbose, but it's also the most flexible. Here it is in a function Item({ name, isPacked }) { let itemContent = name; if (isPacked) { - itemContent = name + " ✔"; + itemContent = name + " ✅"; } return (
  • @@ -401,7 +401,7 @@ function Item({ name, isPacked }) { if (isPacked) { itemContent = ( - {name + " ✔"} + {name + " ✅"} ); } @@ -464,7 +464,7 @@ Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); } @@ -502,7 +502,7 @@ export default function PackingList() { function Item({ name, isPacked }) { return (
  • - {name} {isPacked ? '✔' : '❌'} + {name} {isPacked ? '✅' : '❌'}
    • ); } diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index ce49b85c8..34ee0c01a 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -327,7 +327,7 @@ In this example, the JavaScript `&&` operator is used to conditionally render a function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); } From b5f28b48441e7e46c11ba066110a3c952c33c4ba Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski <70535775+BartoszKlonowski@users.noreply.github.com> Date: Fri, 23 Aug 2024 14:21:11 +0200 Subject: [PATCH 02/18] Redirect lists-and-keys to rendering-lists describing key (#7120) --- vercel.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/vercel.json b/vercel.json index eac0efb9c..8b0546e37 100644 --- a/vercel.json +++ b/vercel.json @@ -24,6 +24,11 @@ "destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key", "permanent": false }, + { + "source": "/docs/lists-and-keys", + "destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key", + "permanent": false + }, { "source": "/link/invalid-hook-call", "destination": "/warnings/invalid-hook-call-warning", From 7d50c3ffd4df2dc7903f4e41069653a456a9c223 Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski <70535775+BartoszKlonowski@users.noreply.github.com> Date: Sun, 25 Aug 2024 22:32:42 +0200 Subject: [PATCH 03/18] Emphasize the second problem paragraph with chain of effects example (#7108) * Emphasize the second problem acapit with chain of effects example * Replace 'One' with 'First' to keep problems counting consistent --- src/content/learn/you-might-not-need-an-effect.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index 66cdc3117..27031720d 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -408,9 +408,9 @@ function Game() { There are two problems with this code. -One problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below. +First problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below. -Even if it weren't slow, as your code evolves, you will run into cases where the "chain" you wrote doesn't fit the new requirements. Imagine you are adding a way to step through the history of the game moves. You'd do it by updating each state variable to a value from the past. However, setting the `card` state to a value from the past would trigger the Effect chain again and change the data you're showing. Such code is often rigid and fragile. +The second problem is that even if it weren't slow, as your code evolves, you will run into cases where the "chain" you wrote doesn't fit the new requirements. Imagine you are adding a way to step through the history of the game moves. You'd do it by updating each state variable to a value from the past. However, setting the `card` state to a value from the past would trigger the Effect chain again and change the data you're showing. Such code is often rigid and fragile. In this case, it's better to calculate what you can during rendering, and adjust the state in the event handler: From 50004fa267465da70fafdbaa7914ebf9fe00ae83 Mon Sep 17 00:00:00 2001 From: Denis Radin Date: Mon, 26 Aug 2024 19:00:18 +0300 Subject: [PATCH 04/18] Adds React Advanced London 2024 (#7127) PR to add Radv 2024 conference --- src/content/community/conferences.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 5070fbc41..3e2d76060 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -55,6 +55,11 @@ October 18, 2024. In-person in Brussels, Belgium (hybrid event) [Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact) +### React Advanced London 2024 {/*react-advanced-london-2024*/} +October 25 & 28, 2024. In-person in London, UK + online (hybrid event) + +[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) + ### React Africa 2024 {/*react-africa-2024*/} November 29, 2024. In-person in Casablanca, Morocco (hybrid event) From 40d73490733a1665596eee8b547278231db3b8e3 Mon Sep 17 00:00:00 2001 From: Sophie Alpert Date: Wed, 28 Aug 2024 17:58:32 -0700 Subject: [PATCH 05/18] Parallel structure --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 5663af392..a68ddc014 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -15,7 +15,7 @@ The React reference documentation is broken down into functional subsections: Programmatic React features: * [Hooks](/reference/react/hooks) - Use different React features from your components. -* [Components](/reference/react/components) - Documents built-in components that you can use in your JSX. +* [Components](/reference/react/components) - Built-in components that you can use in your JSX. * [APIs](/reference/react/apis) - APIs that are useful for defining components. * [Directives](/reference/rsc/directives) - Provide instructions to bundlers compatible with React Server Components. From c2d61310664cc0d94f89ca21fc1d44e674329799 Mon Sep 17 00:00:00 2001 From: Tom Eastman Date: Sun, 1 Sep 2024 18:31:29 +1200 Subject: [PATCH 06/18] Fix typo 'bulit' -> 'built' (#7138) Co-authored-by: Tom Eastman --- src/content/reference/react-dom/components/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/components/index.md b/src/content/reference/react-dom/components/index.md index c9b355c84..ec2e1d2ee 100644 --- a/src/content/reference/react-dom/components/index.md +++ b/src/content/reference/react-dom/components/index.md @@ -34,7 +34,7 @@ They are special in React because passing the `value` prop to them makes them *[ ## Resource and Metadata Components {/*resource-and-metadata-components*/} -These bulit-in browser components let you load external resources or annotate the document with metadata: +These built-in browser components let you load external resources or annotate the document with metadata: * [``](/reference/react-dom/components/link) * [``](/reference/react-dom/components/meta) From 391dadb993d43c6bd15d9ebfdfc3adeb16d52094 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=A9=EA=B8=B0=ED=98=84?= <102677317+kihyeoon@users.noreply.github.com> Date: Mon, 2 Sep 2024 15:54:02 +0900 Subject: [PATCH 07/18] Fix typos in lazy.md and cache.md (#7141) --- src/content/reference/react/cache.md | 4 ++-- src/content/reference/react/lazy.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 0e56e3ef0..099d1c6f1 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -226,7 +226,7 @@ By caching a long-running data fetch, you can kick off asynchronous work prior t ```jsx [[2, 6, "await getUser(id)"], [1, 17, "getUser(id)"]] const getUser = cache(async (id) => { return await db.user.query(id); -}) +}); async function Profile({id}) { const user = await getUser(id); @@ -327,7 +327,7 @@ In general, you should use [`useMemo`](/reference/react/useMemo) for caching a e 'use client'; function WeatherReport({record}) { - const avgTemp = useMemo(() => calculateAvg(record)), record); + const avgTemp = useMemo(() => calculateAvg(record), record); // ... } diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index db99daa11..5ec74d0d9 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -78,7 +78,7 @@ Now that your component's code loads on demand, you also need to specify what sh }>

    Preview

    -     + ``` In this example, the code for `MarkdownPreview` won't be loaded until you attempt to render it. If `MarkdownPreview` hasn't loaded yet, `Loading` will be shown in its place. Try ticking the checkbox: From cd923d6895c2fc64bc835851a1e3ec2e4234b3aa Mon Sep 17 00:00:00 2001 From: JiashengWu Date: Sat, 7 Sep 2024 01:10:14 +0800 Subject: [PATCH 08/18] Update conferences.md to move the past conferences lower (#7130) --- src/content/community/conferences.md | 40 ++++++++++++++-------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 3e2d76060..c1bd7967f 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -10,26 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c ## Upcoming Conferences {/*upcoming-conferences*/} -### React Nexus 2024 {/*react-nexus-2024*/} -July 04 & 05, 2024. Bangalore, India (In-person event) - -[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in) - -### Chain React 2024 {/*chain-react-2024*/} -July 17-19, 2024. In-person in Portland, OR, USA - -[Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf) - -### The Geek Conf 2024 {/*the-geek-conf-2024*/} -July 25, 2024. In-person in Berlin, Germany + remote (hybrid event) - -[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf) - -### React Rally 2024 🐙 {/*react-rally-2024*/} -August 12-13, 2024. Park City, UT, USA - -[Website](https://reactrally.com) - [Twitter](https://twitter.com/ReactRally) - [YouTube](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw) - ### React Universe Conf 2024 {/*react-universe-conf-2024*/} September 5-6, 2024. Wrocław, Poland. @@ -67,6 +47,26 @@ November 29, 2024. In-person in Casablanca, Morocco (hybrid event) ## Past Conferences {/*past-conferences*/} +### React Rally 2024 🐙 {/*react-rally-2024*/} +August 12-13, 2024. Park City, UT, USA + +[Website](https://reactrally.com) - [Twitter](https://twitter.com/ReactRally) - [YouTube](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw) + +### The Geek Conf 2024 {/*the-geek-conf-2024*/} +July 25, 2024. In-person in Berlin, Germany + remote (hybrid event) + +[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf) + +### Chain React 2024 {/*chain-react-2024*/} +July 17-19, 2024. In-person in Portland, OR, USA + +[Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf) + +### React Nexus 2024 {/*react-nexus-2024*/} +July 04 & 05, 2024. Bangalore, India (In-person event) + +[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in) + ### React Summit 2024 {/*react-summit-2024*/} June 14 & 18, 2024. In-person in Amsterdam, Netherlands + remote (hybrid event) From 2c0627277fb00b2772f636d142aa41e6265aeae6 Mon Sep 17 00:00:00 2001 From: Denis Urban Date: Fri, 6 Sep 2024 20:14:00 +0300 Subject: [PATCH 09/18] add React Day Berlin 2024 to conferences.md (#7137) --- src/content/community/conferences.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index c1bd7967f..cd1c87993 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -45,6 +45,11 @@ November 29, 2024. In-person in Casablanca, Morocco (hybrid event) [Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_) +### React Day Berlin 2024 {/*react-day-berlin-2024*/} +December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event) + +[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin) + ## Past Conferences {/*past-conferences*/} ### React Rally 2024 🐙 {/*react-rally-2024*/} From 60ef58c98253fed44ea63c7b9f54168fb7a4e487 Mon Sep 17 00:00:00 2001 From: Oleg Komissarov Date: Fri, 6 Sep 2024 19:18:07 +0200 Subject: [PATCH 10/18] Update conferences.md, add conference (#7135) * Update conferences.md, add conference * Update conferences.md --------- Co-authored-by: Eli White --- src/content/community/conferences.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index cd1c87993..cd0862b19 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -40,6 +40,11 @@ October 25 & 28, 2024. In-person in London, UK + online (hybrid event) [Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) +### React Summit US 2024 {/*react-summit-us-2024*/} +November 19 & 22, 2024. In-person in New York, USA + online (hybrid event) + +[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/) + ### React Africa 2024 {/*react-africa-2024*/} November 29, 2024. In-person in Casablanca, Morocco (hybrid event) From 9aa2e3668da290f92f8997a25f28bd3f58b2a26d Mon Sep 17 00:00:00 2001 From: TinoM <151432822+Tinttori@users.noreply.github.com> Date: Sun, 8 Sep 2024 04:23:09 +0300 Subject: [PATCH 11/18] =?UTF-8?q?Changed=20the=20documentation=20of=20the?= =?UTF-8?q?=20subscribe=20argument=20to=20a=20more=20accurat=E2=80=A6=20(#?= =?UTF-8?q?6691)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Changed the documentation of the subscribe argument to a more accurate one. * Update useSyncExternalStore.md --------- Co-authored-by: Sophie Alpert --- src/content/reference/react/useSyncExternalStore.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md index 481690d7e..05e0c0831 100644 --- a/src/content/reference/react/useSyncExternalStore.md +++ b/src/content/reference/react/useSyncExternalStore.md @@ -41,7 +41,7 @@ It returns the snapshot of the data in the store. You need to pass two functions #### Parameters {/*parameters*/} -* `subscribe`: A function that takes a single `callback` argument and subscribes it to the store. When the store changes, it should invoke the provided `callback`. This will cause the component to re-render. The `subscribe` function should return a function that cleans up the subscription. +* `subscribe`: A function that takes a single `callback` argument and subscribes it to the store. When the store changes, it should invoke the provided `callback`, which will cause React to re-call `getSnapshot` and (if needed) re-render the component. The `subscribe` function should return a function that cleans up the subscription. * `getSnapshot`: A function that returns a snapshot of the data in the store that's needed by the component. While the store has not changed, repeated calls to `getSnapshot` must return the same value. If the store changes and the returned value is different (as compared by [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)), React re-renders the component. From 0f2284ddc8dcab8bbb9b42c04f3c7af94b5b2e73 Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Mon, 9 Sep 2024 14:28:04 -0700 Subject: [PATCH 12/18] Update copyright footer (#7152) Per https://fburl.com/wiki/ioqmn40p --- src/components/Layout/Footer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index 5bcf9df98..4e19039ed 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -283,7 +283,7 @@ export function Footer() {
    - ©{new Date().getFullYear()} + Copyright © Meta Platforms, Inc
    Date: Mon, 16 Sep 2024 12:36:31 +0530 Subject: [PATCH 13/18] Update the version 3 (#7161) --- .github/workflows/analyze.yml | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml index 87dcfdc73..2a905a0df 100644 --- a/.github/workflows/analyze.yml +++ b/.github/workflows/analyze.yml @@ -11,10 +11,10 @@ jobs: analyze: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v3 - name: Set up node - uses: actions/setup-node@v1 + uses: actions/setup-node@v3 with: node-version: '20.x' @@ -22,7 +22,7 @@ jobs: uses: bahmutov/npm-install@v1.7.10 - name: Restore next build - uses: actions/cache@v2 + uses: actions/cache@v3 id: restore-build-cache env: cache-name: cache-next-build @@ -41,7 +41,7 @@ jobs: run: npx -p nextjs-bundle-analysis@0.5.0 report - name: Upload bundle - uses: actions/upload-artifact@v2 + uses: actions/upload-artifact@v3 with: path: .next/analyze/__bundle_analysis.json name: bundle_analysis.json @@ -73,7 +73,7 @@ jobs: run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare - name: Upload analysis comment - uses: actions/upload-artifact@v2 + uses: actions/upload-artifact@v3 with: name: analysis_comment.txt path: .next/analyze/__bundle_analysis_comment.txt @@ -82,7 +82,7 @@ jobs: run: echo ${{ github.event.number }} > ./pr_number - name: Upload PR number - uses: actions/upload-artifact@v2 + uses: actions/upload-artifact@v3 with: name: pr_number path: ./pr_number From 505c85db8c232b474282d55391c67884de8d99dd Mon Sep 17 00:00:00 2001 From: Strek Date: Tue, 17 Sep 2024 13:48:58 +0530 Subject: [PATCH 14/18] Update you-might-not-need-an-effect.md (#7169) --- src/content/learn/you-might-not-need-an-effect.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index 27031720d..a009793ab 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -408,7 +408,7 @@ function Game() { There are two problems with this code. -First problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below. +The first problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below. The second problem is that even if it weren't slow, as your code evolves, you will run into cases where the "chain" you wrote doesn't fit the new requirements. Imagine you are adding a way to step through the history of the game moves. You'd do it by updating each state variable to a value from the past. However, setting the `card` state to a value from the past would trigger the Effect chain again and change the data you're showing. Such code is often rigid and fragile. From 39abc60fce1588b4e83cc45d52b522aa63c01bc2 Mon Sep 17 00:00:00 2001 From: Ricky Date: Thu, 19 Sep 2024 14:42:44 -0400 Subject: [PATCH 15/18] Nit: server actions can't be passed events (#7175) --- src/content/reference/rsc/server-actions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/rsc/server-actions.md b/src/content/reference/rsc/server-actions.md index 06613cb7c..d24e896f0 100644 --- a/src/content/reference/rsc/server-actions.md +++ b/src/content/reference/rsc/server-actions.md @@ -53,7 +53,7 @@ When React renders the `EmptyNote` Server Component, it will create a reference export default function Button({onClick}) { console.log(onClick); // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'} - return + return } ``` From c003ac4eb130fca70b88cf3a1b80ce5f76c51ae3 Mon Sep 17 00:00:00 2001 From: Ricky Date: Sun, 22 Sep 2024 13:19:03 -0400 Subject: [PATCH 16/18] Add stable fn notes to useMemo, useTransition, useState, and useReducer (#7181) --- src/content/reference/react/useCallback.md | 8 +- src/content/reference/react/useMemo.md | 77 ++++++++++++++++++++ src/content/reference/react/useReducer.md | 1 + src/content/reference/react/useState.md | 2 + src/content/reference/react/useTransition.md | 2 + 5 files changed, 86 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react/useCallback.md b/src/content/reference/react/useCallback.md index 93ce700e4..abcd474df 100644 --- a/src/content/reference/react/useCallback.md +++ b/src/content/reference/react/useCallback.md @@ -711,7 +711,7 @@ function ChatRoom({ roomId }) { useEffect(() => { const options = createOptions(); - const connection = createConnection(); + const connection = createConnection(options); connection.connect(); // ... ``` @@ -722,7 +722,7 @@ This creates a problem. [Every reactive value must be declared as a dependency o ```js {6} useEffect(() => { const options = createOptions(); - const connection = createConnection(); + const connection = createConnection(options); connection.connect(); return () => connection.disconnect(); }, [createOptions]); // 🔴 Problem: This dependency changes on every render @@ -744,7 +744,7 @@ function ChatRoom({ roomId }) { useEffect(() => { const options = createOptions(); - const connection = createConnection(); + const connection = createConnection(options); connection.connect(); return () => connection.disconnect(); }, [createOptions]); // ✅ Only changes when createOptions changes @@ -766,7 +766,7 @@ function ChatRoom({ roomId }) { } const options = createOptions(); - const connection = createConnection(); + const connection = createConnection(options); connection.connect(); return () => connection.disconnect(); }, [roomId]); // ✅ Only changes when roomId changes diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md index a44c86fc8..33193ee3b 100644 --- a/src/content/reference/react/useMemo.md +++ b/src/content/reference/react/useMemo.md @@ -1056,6 +1056,83 @@ Keep in mind that you need to run React in production mode, disable [React Devel --- +### Preventing an Effect from firing too often {/*preventing-an-effect-from-firing-too-often*/} + +Sometimes, you might want to use a value inside an [Effect:](/learn/synchronizing-with-effects) + +```js {4-7,10} +function ChatRoom({ roomId }) { + const [message, setMessage] = useState(''); + + const options = { + serverUrl: 'https://localhost:1234', + roomId: roomId + } + + useEffect(() => { + const connection = createConnection(options); + connection.connect(); + // ... +``` + +This creates a problem. [Every reactive value must be declared as a dependency of your Effect.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) However, if you declare `options` as a dependency, it will cause your Effect to constantly reconnect to the chat room: + + +```js {5} + useEffect(() => { + const connection = createConnection(options); + connection.connect(); + return () => connection.disconnect(); + }, [options]); // 🔴 Problem: This dependency changes on every render + // ... +``` + +To solve this, you can wrap the object you need to call from an Effect in `useMemo`: + +```js {4-9,16} +function ChatRoom({ roomId }) { + const [message, setMessage] = useState(''); + + const options = useMemo(() => { + return { + serverUrl: 'https://localhost:1234', + roomId: roomId + }; + }, [roomId]); // ✅ Only changes when roomId changes + + useEffect(() => { + const options = createOptions(); + const connection = createConnection(options); + connection.connect(); + return () => connection.disconnect(); + }, [options]); // ✅ Only changes when createOptions changes + // ... +``` + +This ensures that the `options` object is the same between re-renders if `useMemo` returns the cached object. + +However, since `useMemo` is performance optimization, not a semantic guarantee, React may throw away the cached value if [there is a specific reason to do that](#caveats). This will also cause the effect to re-fire, **so it's even better to remove the need for a function dependency** by moving your object *inside* the Effect: + +```js {5-8,13} +function ChatRoom({ roomId }) { + const [message, setMessage] = useState(''); + + useEffect(() => { + const options = { // ✅ No need for useMemo or object dependencies! + serverUrl: 'https://localhost:1234', + roomId: roomId + } + + const connection = createConnection(options); + connection.connect(); + return () => connection.disconnect(); + }, [roomId]); // ✅ Only changes when roomId changes + // ... +``` + +Now your code is simpler and doesn't need `useMemo`. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect) + + ### Memoizing a dependency of another Hook {/*memoizing-a-dependency-of-another-hook*/} Suppose you have a calculation that depends on an object created directly in the component body: diff --git a/src/content/reference/react/useReducer.md b/src/content/reference/react/useReducer.md index dbd18f6b8..cfd0fb856 100644 --- a/src/content/reference/react/useReducer.md +++ b/src/content/reference/react/useReducer.md @@ -52,6 +52,7 @@ function MyComponent() { #### Caveats {/*caveats*/} * `useReducer` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it. +* The `dispatch` function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect) * In Strict Mode, React will **call your reducer and initializer twice** in order to [help you find accidental impurities.](#my-reducer-or-initializer-function-runs-twice) This is development-only behavior and does not affect production. If your reducer and initializer are pure (as they should be), this should not affect your logic. The result from one of the calls is ignored. --- diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index 48d96f8ee..4aa9d5911 100644 --- a/src/content/reference/react/useState.md +++ b/src/content/reference/react/useState.md @@ -85,6 +85,8 @@ function handleClick() { * React [batches state updates.](/learn/queueing-a-series-of-state-updates) It updates the screen **after all the event handlers have run** and have called their `set` functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can use [`flushSync`.](/reference/react-dom/flushSync) +* The `set` function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect) + * Calling the `set` function *during rendering* is only allowed from within the currently rendering component. React will discard its output and immediately attempt to render it again with the new state. This pattern is rarely needed, but you can use it to **store information from the previous renders**. [See an example below.](#storing-information-from-previous-renders) * In Strict Mode, React will **call your updater function twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. If your updater function is pure (as it should be), this should not affect the behavior. The result from one of the calls will be ignored. diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index 77c2cdad5..5066fe637 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -80,6 +80,8 @@ function TabContainer() { * The function you pass to `startTransition` must be synchronous. React immediately executes this function, marking all state updates that happen while it executes as Transitions. If you try to perform more state updates later (for example, in a timeout), they won't be marked as Transitions. +* The `startTransition` function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect) + * A state update marked as a Transition will be interrupted by other state updates. For example, if you update a chart component inside a Transition, but then start typing into an input while the chart is in the middle of a re-render, React will restart the rendering work on the chart component after handling the input update. * Transition updates can't be used to control text inputs. From 27b6ec2724431b748d99430734897c09decc950d Mon Sep 17 00:00:00 2001 From: Ahmed Abdelbaset Date: Mon, 23 Sep 2024 03:22:32 +0300 Subject: [PATCH 17/18] Update src/content/learn/conditional-rendering.md --- src/content/learn/conditional-rendering.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md index 6c5a3b277..1df5635f4 100644 --- a/src/content/learn/conditional-rendering.md +++ b/src/content/learn/conditional-rendering.md @@ -206,11 +206,7 @@ return ( ); ``` -<<<<<<< HEAD -يمكنك قرائتها على النحو التالي *”إذا كان `isPacked` صحيحا، إذا قم بعرض `name + ' ✔'`، وإلا (`:`) قم بعرض `name`“.* -======= -You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✅'`, otherwise (`:`) render `name`"*. ->>>>>>> c003ac4eb130fca70b88cf3a1b80ce5f76c51ae3 +يمكنك قرائتها على النحو التالي *”إذا كان `isPacked` صحيحا، إذا قم بعرض name + ' ✅'`، وإلا (`:`) قم بعرض `name`“.* From aa79071f138ad70a43512dc8ae83da4d8df89e2a Mon Sep 17 00:00:00 2001 From: Ahmed Abdelbaset Date: Mon, 23 Sep 2024 03:24:07 +0300 Subject: [PATCH 18/18] Update src/content/learn/conditional-rendering.md --- src/content/learn/conditional-rendering.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md index 1df5635f4..9969a4a0f 100644 --- a/src/content/learn/conditional-rendering.md +++ b/src/content/learn/conditional-rendering.md @@ -52,11 +52,7 @@ export default function PackingList() { -<<<<<<< HEAD -لاحظ أن بعض مكونات `Item` لديها خاصية `isPacked` معينة إلى `true` بدلا من `false`. ترغب في إضافة علامة التحقق (✔) إلى العناصر المحزومة في حالة `isPacked={true}`. -======= -Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✅) to packed items if `isPacked={true}`. ->>>>>>> c003ac4eb130fca70b88cf3a1b80ce5f76c51ae3 +لاحظ أن بعض مكونات `Item` لديها خاصية `isPacked` معينة إلى `true` بدلا من `false`. ترغب في إضافة علامة التحقق (✅) إلى العناصر المحزومة في حالة `isPacked={true}`. يمكنك كتابة ذلك باستخدام [عبارة `if`/`else`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) على النحو التالي: