Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
73d7073
fix: correct overlay highlighting in code examples (#7669)
mrbadri May 15, 2025
4a7bdc1
fix: the value property of checkbox to the checked property (#7804)
kosh-jp May 16, 2025
ae4a40a
No need for useState here — useCounter handles the state internally (…
gbhardwaj00 May 16, 2025
a73055f
docs: fix misplaced prepositional phrase error (#7799)
mehmetmalli May 16, 2025
e2d9fd7
Fix wrong documentation for effect events (#7800)
gbhardwaj00 May 16, 2025
b92bb59
Remove stray console.log and image (#7814)
rickhanlonii May 16, 2025
b3b2166
fix(template): remove unnecessary import of React in template code (#…
dahoho May 16, 2025
9fb0519
fix(reference): correct singular form of 'Server Functions' to 'Serve…
dahoho May 16, 2025
69ce5d3
Add bold mono font (#7815)
rickhanlonii May 16, 2025
8b2fe2b
Remove TODO comments and convert them to issues (#7743)
BartoszKlonowski May 16, 2025
00587d6
Add example of `useActionState` handling execution order (#7733)
ajits01 May 16, 2025
79e1c48
docs: update vite link (#7784)
bornkiss May 16, 2025
c289cd0
docs: add bsky link (#7781)
bornkiss May 16, 2025
7ab1969
React Montreal Meetings have a new link (#7809)
EricCote May 16, 2025
f275c9d
fix: remove useless content (#6615)
loveloki May 17, 2025
0b68054
fix: wrong verb tense in doc (#7818)
aalhoura May 17, 2025
65d297e
fix: typo in challenge solution (#7816)
aalhoura May 17, 2025
f15830d
Use experiemental in all uEE doc sandboxes (#7820)
rickhanlonii May 20, 2025
2571aee
Author: Josh Story <[email protected]>
gnoff May 21, 2025
61648f4
Merge branch 'main' of https://github.com/reactjs/react.dev into sync…
react-translations-bot May 26, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions src/content/learn/separating-events-from-effects.md
Original file line number Diff line number Diff line change
Expand Up @@ -973,6 +973,23 @@ To fix this code, it's enough to follow the rules.

<Sandpack>

```json package.json hidden
{
"dependencies": {
"react": "experimental",
"react-dom": "experimental",
"react-scripts": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
```


```js
import { useState, useEffect } from 'react';

Expand Down Expand Up @@ -1026,6 +1043,22 @@ If you remove the suppression comment, React will tell you that this Effect's co

<Sandpack>

```json package.json hidden
{
"dependencies": {
"react": "experimental",
"react-dom": "experimental",
"react-scripts": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
```

```js
import { useState, useEffect } from 'react';

Expand Down
28 changes: 27 additions & 1 deletion src/content/reference/react-dom/static/prerender.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
* **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML.
* **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](/reference/react-dom/server/renderToReadableStream#setting-the-status-code) before the shell is emitted.
* **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
* **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](/reference/react-dom/server/renderToReadableStream#aborting-server-rendering) and render the rest on the client.
* **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort prerendering](#aborting-prerendering) and render the rest on the client.

#### Returns {/*returns*/}

Expand All @@ -66,7 +66,9 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
- `prelude`: a [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) of HTML. You can use this stream to send a response in chunks, or you can read the entire stream into a string.
- If rendering fails, the Promise will be rejected. [Use this to output a fallback shell.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell)

#### Caveats {/*caveats*/}

`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself.


<Note>
Expand Down Expand Up @@ -287,6 +289,30 @@ Suspense-enabled data fetching without the use of an opinionated framework is no

---

### Aborting prerendering {/*aborting-prerendering*/}

You can force the prerender to "give up" after a timeout:

```js {2-5,11}
async function renderToString() {
const controller = new AbortController();
setTimeout(() => {
controller.abort()
}, 10000);

try {
// the prelude will contain all the HTML that was prerendered
// before the controller aborted.
const {prelude} = await prerender(<App />, {
signal: controller.signal,
});
//...
```

Any Suspense boundaries with incomplete children will be included in the prelude in the fallback state.

---

## Troubleshooting {/*troubleshooting*/}

### My stream doesn't start until the entire app is rendered {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/}
Expand Down
30 changes: 29 additions & 1 deletion src/content/reference/react-dom/static/prerenderToNodeStream.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
* **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML.
* **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToPipeableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](/reference/react-dom/server/renderToPipeableStream#setting-the-status-code) before the shell is emitted.
* **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
* **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](/reference/react-dom/server/renderToPipeableStream#aborting-server-rendering) and render the rest on the client.
* **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort prerendering](#aborting-prerendering) and render the rest on the client.

#### Returns {/*returns*/}

Expand All @@ -67,6 +67,10 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
- `prelude`: a [Node.js Stream.](https://nodejs.org/api/stream.html) of HTML. You can use this stream to send a response in chunks, or you can read the entire stream into a string.
- If rendering fails, the Promise will be rejected. [Use this to output a fallback shell.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell)

#### Caveats {/*caveats*/}

`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself.

<Note>

### When should I use `prerenderToNodeStream`? {/*when-to-use-prerender*/}
Expand Down Expand Up @@ -285,6 +289,30 @@ Suspense-enabled data fetching without the use of an opinionated framework is no

---

### Aborting prerendering {/*aborting-prerendering*/}

You can force the prerender to "give up" after a timeout:

```js {2-5,11}
async function renderToString() {
const controller = new AbortController();
setTimeout(() => {
controller.abort()
}, 10000);

try {
// the prelude will contain all the HTML that was prerendered
// before the controller aborted.
const {prelude} = await prerenderToNodeStream(<App />, {
signal: controller.signal,
});
//...
```

Any Suspense boundaries with incomplete children will be included in the prelude in the fallback state.

---

## Troubleshooting {/*troubleshooting*/}

### My stream doesn't start until the entire app is rendered {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/}
Expand Down