Skip to content

Sync with react.dev @ f3d9794f - #405

Open
react-translations-bot wants to merge 192 commits into
mainfrom
sync-f3d9794f
Open

Sync with react.dev @ f3d9794f#405
react-translations-bot wants to merge 192 commits into
mainfrom
sync-f3d9794f

Conversation

@react-translations-bot

Copy link
Copy Markdown
Collaborator

sky21kr and others added 30 commits September 1, 2025 14:32
Co-authored-by: unknown <deepanshu.9dd@gmail.com~>
`a expensive` should be `an expensive`
Fix "documentatino" typo to "documentation" in comment about useOptimistic reference page.
…d example of the use API (#7767)

* Update "Deep Dive" in reusing-logic-with-custom-hooks.md with link to and example of the use API

* Remove mention of Server Components when explaining the use API

* Update src/content/learn/reusing-logic-with-custom-hooks.md

Co-authored-by: Ricky <rickhanlonii@gmail.com>

* fix: Correct which lines are highlighted in code example

---------

Co-authored-by: Ricky <rickhanlonii@gmail.com>
The previous examples used a service called loremflickr.com to link to  placeholder images. Since that service is now down, I updated them to reference placecats.com instead, which we already use in other examples as well. placecats doesn't have the same random cat feature so I roughly approximated it in the example code.

Closes #7966
* Fix handleClick compiler intro example

* Use a note instead

* Update src/content/learn/react-compiler/introduction.md
* fix: changed source file names in docs from App.js, index.js and styles.css to src/ dir

* fix: updated wrong image with the correct one with current sandbox file structure

* refactor: reverted all formatting and just just mention src folder in introductory section

* Reverted changes tutorial-tic-tac-toe.md

* added enhanced image of sandbox
* docs: add flushSync Troubleshooting section

* Update src/content/reference/react-dom/flushSync.md

* oops

* Apply suggestions from code review

* formatting and pitfall

---------

Co-authored-by: Ricky <rickhanlonii@gmail.com>
Co-authored-by: Rick Hanlon <rickhanlonii@meta.com>
* correct IconExperimental naming and usage (from #7972)

Co-authored-by: Tuna <198469603+TunaDev0@users.noreply.github.com>

* Bump Activity to Canary in docs

---------

Co-authored-by: Tuna <198469603+TunaDev0@users.noreply.github.com>
Happened to notice we were still on an old version of the compiler. This PR upgrades us to use the latest RC.
Copied over our copyright script from the react repo. I made a small fix to handle shebangs.
* Add copyright script

Copied over our copyright script from the react repo. I made a small fix to handle shebangs.

* Update copyright on all files

Run the script.
…iler (#7988)

In react/react#34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs.

In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided.

To express that a codeblock has an expected error, we can use the following metadata:

```ts
// pseudo type def
type MarkdownCodeBlockMetadata = {
    expectedErrors?: {
      'react-compiler'?: number[];
    };
  };
```

and can be used like so:

````
```js {expectedErrors: {'react-compiler': [4]}}
// ❌ setState directly in render
function Component({value}) {
  const [count, setCount] = useState(0);
  setCount(value); // error on L4
  return <div>{count}</div>;
}
```
````

Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic.
* Add local eslint rule to validate markdown codeblocks with React Compiler

In react/react#34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs.

In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided.

To express that a codeblock has an expected error, we can use the following metadata:

```ts
// pseudo type def
type MarkdownCodeBlockMetadata = {
    expectedErrors?: {
      'react-compiler'?: number[];
    };
  };
```

and can be used like so:

````
```js {expectedErrors: {'react-compiler': [4]}}
// ❌ setState directly in render
function Component({value}) {
  const [count, setCount] = useState(0);
  setCount(value); // error on L4
  return <div>{count}</div>;
}
```
````

Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic.

* fix compiler errors

I went through the list of existing errors and tried to separate the expected errors from those that seem to be flagging unexpected issues.  In particular, our effects validations are flagging patterns that our own docs examples use. I added todos for these and will follow up later.
gaearon and others added 28 commits July 1, 2026 01:29
* Clarify use vs await

* Refine based on feedback

* Address review comments
Co-authored-by: Tuna <tuna@MacBookPro.station>
…505)

* [Suspense] Add 'What activates a Suspense boundary' section

* [Suspense] Clarify image activation wording (review feedback)

* Define "suspense-enabled-framework"

* Update outdated framework-less data fetching note to reference use()

* fix: clarify Suspense boundary activation and fallback behavior

* Add code example

* update styling

* Cleanup caveat

* add link to blogpost

* Replace notes with link to suspense docs

* Tweak caveat

* Update caveat to clarify streaming behavior during server rendering

* Address feedback

* address feedback

* Clarify documentation on Suspense-enabled frameworks

* Update links and wording

* Improve example

* Clarify heading for Suspense-enabled frameworks section

* Restructure page

* Update to be docs compliant and clarify images

* Address review feedback

* Add more suspense examples

* Add more examples

* Clarify image loading behavior during <ViewTransition> updates in Suspense documentation

* Enhance Suspense documentation with additional details on font and image loading during <ViewTransition> updates

* Update

* Enhance Suspense documentation with examples of stylesheet loading behavior and vanilla DOM comparison

* agent review
* Polish Suspense activation examples

- Move Canary badges into section headings and render them icon-only
  in the table of contents
- Replace the image demo's text fallback with a profile skeleton
- Add a combined example coordinating data, a stylesheet, a font, and
  an image behind one boundary, with a plain DOM comparison
- Match skeleton dimensions to the revealed content

* Make the combined example's data delay consistent between runs
* Tune Suspense demo heights, data delay, and DOM comparison wording

* Make section openers stand alone and restore demo timing

* Shrink image demo portraits so both cards fit without layout shift

* Name the resources in the combined section opener

* State the ViewTransition condition in the combined section opener

* Align combined section opener with sibling sections

* Frame font and image waiting as Suspense behavior gated on ViewTransition

* Match the combined section opener to its sibling sections

* Document the experimental defer prop

* Reduce the combined example's data delay

* tweak
* Add dynamic OG images for docs pages

* Match OG card design to existing static images

* Generate OG images statically at build time

* Clean up orphaned lockfile entry

* Show section label on OG cards and guard pages without a card

* Center title and enlarge section label on OG cards
…Leadership Council, and refresh membership.

Co-authored-by: Sebastian "Sebbie" Silbermann <silbermann.sebastian@gmail.com>
* Resize long og image text

* address feedback
Please accept my changes for React Alicante and CityJS Athens
* Document browser-only rendering

Add the Canary browser API reference, including optional lazy reasons, server bailout reporting, fatal and abort behavior, navigation entries, and onBrowserBailout options for every streaming, resume, and prerender API that supports it.

* Polish browser API docs and add live example

* Document browser with use and Suspense

---------

Co-authored-by: Aurora Scharff <aurora.sofie@gmail.com>
* Clarify browser-only rendering guidance

* Polish browser-only guidance wording

* Use Canary markers in browser guidance

* Present browser as a use resource

* Polish browser usage labels

* Address browser guidance review

* Clarify browser return value is opaque

* Restore alternative wording

* Restore hydration alternative wording

* Focus use introduction on resources

* Note stable browser cleanup
* Pin matching React Canary versions in Sandpack demos

* Use cached Canary build in Sandpack demos
* Improve browser-only rendering example

* Clarify browser-only example action

* Show browser-only fallback on reload
* Add conditional browser query example

* Move browser query hook into its own example file

* Use IndexedDB in conditional browser example

* Clarify conditional browser rendering example

* Polish browser rendering examples

* Bridge conditional browser examples

* Tighten conditional browser example intro

* Use time zone for conditional browser example

* Clarify conditional example transition

* Lead conditional browser docs with time zone example

* Address conditional browser rendering feedback

* update

* Clarify conditional browser control flow

* Clarify conditional data fetching pattern

* Clarify conditional rendering outcomes

* Polish conditional browser examples

* Clarify conditional query rendering

* Align conditional browser guidance
…632)

* Document missing Fizz server rendering options and fix resume references

This adds the `formState`, `importMap`, `onHeaders`, and `maxHeadersLength` options to the `renderToPipeableStream` and `renderToReadableStream` reference pages, documents the object form of `nonce` for separate script and style nonces, and adds `importMap`, `onHeaders`, and `maxHeadersLength` to the `prerender` and `prerenderToNodeStream` pages. All of these options are supported in stable releases but were never documented. The `resumeAndPrerender` entries on the `react-dom/static` index were marked as experimental-only even though they ship in stable releases, so the badge is removed, and the `resumeAndPrerender` intro destructured a `postpone` property that is actually called `postponed`.

The `resumeToPipeableStream` page no longer documents a `signal` option because the Node.js implementation neither types nor reads it, and it now documents the `onAllReady` callback that the implementation does support. The same page referred to `resume` in its intro and Returns section where it meant `resumeToPipeableStream`, and the `react-dom/server` index linked both resume entries to the `renderToPipeableStream` page; they now point at their own pages.

Co-Authored-By: Claude Code (kimi-k3[1m]) <noreply@anthropic.com>

* Document the formState option for hydrateRoot

This adds the `formState` option to the `hydrateRoot` reference. The option carries the form state produced by a Server Function form submission so that `useActionState` with a `permalink` returns the submitted state during hydration instead of the initial state, and it must match the `formState` passed to the server renderer. The option shipped in React 19.0 but was never documented.

---------

Co-authored-by: Claude Code (kimi-k3[1m]) <noreply@anthropic.com>

for (const fullPath of candidates) {
try {
const content = fs.readFileSync(fullPath, 'utf8');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.