From 4a4e579fdb4fd4b97bc4b983487c2e83291211fd Mon Sep 17 00:00:00 2001 From: Sam Ko Date: Wed, 26 Feb 2025 12:08:17 -0800 Subject: [PATCH 1/5] docs(hydrateRoot): update suppressHydrationWarning behavior (#7651) --- src/content/reference/react-dom/client/hydrateRoot.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index ca4708845..99190b03a 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -99,7 +99,7 @@ An app fully built with React will usually not have any calls to `root.unmount`. This is mostly useful if your React root's DOM node (or any of its ancestors) may get removed from the DOM by some other code. For example, imagine a jQuery tab panel that removes inactive tabs from the DOM. If a tab gets removed, everything inside it (including the React roots inside) would get removed from the DOM as well. You need to tell React to "stop" managing the removed root's content by calling `root.unmount`. Otherwise, the components inside the removed root won't clean up and free up resources like subscriptions. -Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree. +Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree. #### Parameters {/*root-unmount-parameters*/} @@ -270,7 +270,7 @@ export default function App() { -This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. Unless it’s text content, React still won’t attempt to patch it up, so it may remain inconsistent until future updates. +This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. React will **not** attempt to patch mismatched text content. --- From cc774fa23167173c144096bb02a49807bcd9eccb Mon Sep 17 00:00:00 2001 From: Karthikeyan B Date: Thu, 27 Feb 2025 16:10:41 +0530 Subject: [PATCH 2/5] removing Provider as in React 19 Context can be used as a provider (#7654) --- .../learn/passing-data-deeply-with-context.md | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 1aea87b35..e81678c8e 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -468,15 +468,15 @@ import { LevelContext } from './LevelContext.js'; export default function Section({ level, children }) { return (
- + {children} - +
); } ``` -This tells React: "if any component inside this `
` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `` in the UI tree above it. +This tells React: "if any component inside this `
` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `` in the UI tree above it. @@ -514,9 +514,9 @@ import { LevelContext } from './LevelContext.js'; export default function Section({ level, children }) { return (
- + {children} - +
); } @@ -567,7 +567,7 @@ export const LevelContext = createContext(1); It's the same result as the original code, but you did not need to pass the `level` prop to each `Heading` component! Instead, it "figures out" its heading level by asking the closest `Section` above: 1. You pass a `level` prop to the `
`. -2. `Section` wraps its children into ``. +2. `Section` wraps its children into ``. 3. `Heading` asks the closest value of `LevelContext` above with `useContext(LevelContext)`. ## Using and providing context from the same component {/*using-and-providing-context-from-the-same-component*/} @@ -595,9 +595,9 @@ export default function Section({ children }) { const level = useContext(LevelContext); return (
- + {children} - +
); } @@ -643,9 +643,9 @@ export default function Section({ children }) { const level = useContext(LevelContext); return (
- + {children} - +
); } @@ -776,9 +776,9 @@ export default function Section({ children, isFancy }) { 'section ' + (isFancy ? 'fancy' : '') }> - + {children} - +
); } @@ -868,7 +868,7 @@ In general, if some information is needed by distant components in different par * To pass context: 1. Create and export it with `export const MyContext = createContext(defaultValue)`. 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep. - 3. Wrap children into `` to provide it from a parent. + 3. Wrap children into `` to provide it from a parent. * Context passes through any components in the middle. * Context lets you write components that "adapt to their surroundings". * Before you use context, try passing props or passing JSX as `children`. @@ -1022,7 +1022,7 @@ li { Remove `imageSize` prop from all the components. -Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`: +Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`: @@ -1036,7 +1036,7 @@ export default function App() { const [isLarge, setIsLarge] = useState(false); const imageSize = isLarge ? 150 : 100; return ( -
- + ) } From 5f09d9f4467871955d794aa5fbc7bf3c4e7a5f4f Mon Sep 17 00:00:00 2001 From: Josef Hartsough <36377458+JosefHartsough@users.noreply.github.com> Date: Thu, 27 Feb 2025 05:41:09 -0500 Subject: [PATCH 3/5] Invalid bluesky dev account link (#7653) * Update index.md Invalid link to bluesky account * Update index.md Fixed invalid bluesky link for react.dev --- src/content/blog/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 5cd8304b1..f7bbe76f3 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -6,7 +6,7 @@ title: React Blog This blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted here first. -You can also follow the [@react.dev](https://bsky.app/profiles/react.js) account on Bluesky, or [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog. +You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account on Bluesky, or [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog. From 6326e7b1b9fa2a7e36a555792e2f1b97cfcf2669 Mon Sep 17 00:00:00 2001 From: lauren Date: Fri, 28 Feb 2025 11:23:33 -0500 Subject: [PATCH 4/5] [ci] Run notify workflow on open or ready for review (#7660) Ports over the fix in the facebook/react repo for this workflow. We don't have to wait for it to be labeled first, now that we have the reusable maintainer check. --- .github/workflows/discord_notify.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml index 9d83081cc..a4b8c9137 100644 --- a/.github/workflows/discord_notify.yml +++ b/.github/workflows/discord_notify.yml @@ -2,7 +2,7 @@ name: Discord Notify on: pull_request_target: - types: [labeled] + types: [opened, ready_for_review] jobs: check_maintainer: From 5a01c0f1104e7572e4c6b6b47a28dab9f451f620 Mon Sep 17 00:00:00 2001 From: Bilal Karakollu Date: Wed, 12 Mar 2025 19:56:56 +0300 Subject: [PATCH 5/5] SYNC merge conflicts --- .github/workflows/discord_notify.yml | 4 -- .../learn/passing-data-deeply-with-context.md | 37 +++---------------- 2 files changed, 6 insertions(+), 35 deletions(-) diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml index d4faa3e49..23974665e 100644 --- a/.github/workflows/discord_notify.yml +++ b/.github/workflows/discord_notify.yml @@ -2,11 +2,7 @@ name: Discord Notify on: pull_request_target: -<<<<<<< HEAD - types: [ labeled ] -======= types: [opened, ready_for_review] ->>>>>>> 6326e7b1b9fa2a7e36a555792e2f1b97cfcf2669 jobs: notify: diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 5abb1f223..0b73235c1 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -476,11 +476,7 @@ export default function Section({ level, children }) { } ``` -<<<<<<< HEAD -Bu React'a şunu söyler: "`
` içindeki herhangi bir eleman,`LevelContext`'i istediğinde, ona bu `level` değerini ver." Bileşen, üzerindeki UI ağacında bulunan en yakın `` değerini kullanır. -======= -This tells React: "if any component inside this `
` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `` in the UI tree above it. ->>>>>>> 6326e7b1b9fa2a7e36a555792e2f1b97cfcf2669 +Bu React'e şunu söyler: "Eğer bu `
` içindeki herhangi bir bileşen `LevelContext` talep ederse, onlara bu `level` değerini ver." Bileşen, UI ağacındaki en yakın ``'in değerini kullanacaktır. @@ -570,15 +566,9 @@ export const LevelContext = createContext(1); Orijinal kodla aynı sonucu elde edersiniz, ancak her `Heading` bileşenine `level` prop'unu aktarmanız gerekmez! Bunun yerine, üstündeki en yakın `Section` bileşenine sorarak başlık seviyesini "bulur": -<<<<<<< HEAD -1. `level` prop'unu `
`'a aktarırsınız. -2. `Section` alt bileşenlerini `` sarmalar. -3. `Heading`, `useContext(LevelContext)` ile birlikte yukarıdaki en yakın `LevelContext`'e değerini sorar. -======= -1. You pass a `level` prop to the `
`. -2. `Section` wraps its children into ``. -3. `Heading` asks the closest value of `LevelContext` above with `useContext(LevelContext)`. ->>>>>>> 6326e7b1b9fa2a7e36a555792e2f1b97cfcf2669 +1. `
`'a bir `level` prop'u geçirirsiniz. +2. `Section`, çocuklarını `` içine sarar. +3. `Heading`, `useContext(LevelContext)` ile yukarıdaki en yakın `LevelContext` değerini talep eder. ## Context değerini provider'ının tanımlandığı bileşende okuma {/*using-and-providing-context-from-the-same-component*/} @@ -878,25 +868,14 @@ Genellikle, bazı bilgilere ağacın farklı bölümlerindeki bileşenler taraf -<<<<<<< HEAD * Context, bir elemanın altındaki tüm ağaca bilgi aktarmasını sağlar. -* Context'i aktarmak için: +* Context geçirme: 1. `export const MyContext = createContext(defaultValue)` ile oluşturun ve dışa aktarın. - 2. Farklı derinlikteki herhangi bir alt bileşenden okumak için `useContext(MyContext)` Hook'una aktarın. + 2. Herhangi bir alt bileşende okumak için `useContext(MyContext)` Hook'unu geçirin. 3. Üst bileşenden değer sağlamak için, alt bileşenleri `` içine sarın. * Context ortada bulunan herhangi bir elamandan aktarılır. * Context, "çevresine adapte olan" bileşenler yazmanıza olanak sağlar. * Context kullanmadan önce, prop olarak aktarmayı veya JSX'i `children` olarak iletmeyi deneyin. -======= -* Context lets a component provide some information to the entire tree below it. -* To pass context: - 1. Create and export it with `export const MyContext = createContext(defaultValue)`. - 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep. - 3. Wrap children into `` to provide it from a parent. -* Context passes through any components in the middle. -* Context lets you write components that "adapt to their surroundings". -* Before you use context, try passing props or passing JSX as `children`. ->>>>>>> 6326e7b1b9fa2a7e36a555792e2f1b97cfcf2669 @@ -1047,11 +1026,7 @@ li { `imageSize` prop'unu bütün bileşenlerden kaldırın. -<<<<<<< HEAD `Context.js` dosyasında `ImageSizeContext`'i oluşturun ve dışa aktarın. Ardından değeri aşağı aktarmak için `List`'i `` ile sarın ve `useContext(ImageSizeContext)` kullanarak `PlaceImage` bileşeninde değerini okuyun: -======= -Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`: ->>>>>>> 6326e7b1b9fa2a7e36a555792e2f1b97cfcf2669