From 4a4e579fdb4fd4b97bc4b983487c2e83291211fd Mon Sep 17 00:00:00 2001 From: Sam Ko Date: Wed, 26 Feb 2025 12:08:17 -0800 Subject: [PATCH 1/4] 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 ca470884..99190b03 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/4] 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 1aea87b3..e81678c8 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/4] 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 5cd8304b..f7bbe76f 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/4] [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 9d83081c..a4b8c913 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: