-
+
-We announced an experimental release of React Compiler at React Conf 2024. We've made a lot of progress since then, and in this post we want to share what's next for React Compiler ...
+In the React 19 Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them ...
-
+
-Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. This was our first in-person conference since 2019, and we were thrilled to be able to bring the community together again ...
+We announced an experimental release of React Compiler at React Conf 2024. We've made a lot of progress since then, and in this post we want to share what's next for React Compiler ...
-
+
-In the React 19 RC Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them ...
+Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. This was our first in-person conference since 2019, and we were thrilled to be able to bring the community together again ...
-
+
The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible, and we don't expect the changes to impact most apps. In this post, we will guide you through the steps for upgrading libraries to React 19 ...
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index e881c8a1f..6d20232fb 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -256,11 +256,11 @@ export default function CatFriends() {
key={cat}
ref={(node) => {
const map = getMap();
- if (node) {
- map.set(cat, node);
- } else {
+ map.set(cat, node);
+
+ return () => {
map.delete(cat);
- }
+ };
}}
>
@@ -309,42 +309,10 @@ li {
}
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "^5.0.0"
- }
-}
-```
-
In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) from item ID to a DOM node. ([Refs can hold any values!](/learn/referencing-values-with-refs)) The [`ref` callback](/reference/react-dom/components/common#ref-callback) on every list item takes care to update the Map:
-```js
- {
- const map = getMap();
- if (node) {
- // Add to the Map
- map.set(cat, node);
- } else {
- // Remove from the Map
- map.delete(cat);
- }
- }}
->
-```
-
-This lets you read individual DOM nodes from the Map later.
-
-
-
-This example shows another approach for managing the Map with a `ref` callback cleanup function.
-
```js
```
-
+This lets you read individual DOM nodes from the Map later.
+
+
+
+When Strict Mode is enabled, ref callbacks will run twice in development.
+
+Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bugs-found-by-re-running-ref-callbacks-in-development) in callback refs.
+
+
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index b336b6e5e..a2bef6bf2 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -45,8 +45,8 @@ An app fully built with React will usually only have one `createRoot` call for i
* **optional** `options`: An object with options for this React root.
- *
-
-`onUncaughtError` is only available in the latest React Canary release.
-
-
-
By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option:
```js [[1, 6, "onUncaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
@@ -578,28 +572,11 @@ export default function App() {
}
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "^5.0.0"
- },
- "main": "/index.js"
-}
-```
-
### Displaying Error Boundary errors {/*displaying-error-boundary-errors*/}
-
-
-`onCaughtError` is only available in the latest React Canary release.
-
-
-
By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option to handle errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary):
```js [[1, 6, "onCaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
@@ -865,8 +842,8 @@ function Throw({error}) {
```json package.json hidden
{
"dependencies": {
- "react": "canary",
- "react-dom": "canary",
+ "react": "19.0.0-rc-3edc000d-20240926",
+ "react-dom": "19.0.0-rc-3edc000d-20240926",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
@@ -1123,8 +1100,8 @@ function Throw({error}) {
```json package.json hidden
{
"dependencies": {
- "react": "canary",
- "react-dom": "canary",
+ "react": "19.0.0-rc-3edc000d-20240926",
+ "react-dom": "19.0.0-rc-3edc000d-20240926",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
index cc30ce22c..c54b6fe11 100644
--- a/src/content/reference/react-dom/client/hydrateRoot.md
+++ b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -41,8 +41,8 @@ React will attach to the HTML that exists inside the `domNode`, and take over ma
* **optional** `options`: An object with options for this React root.
- *
-
-`onUncaughtError` is only available in the latest React Canary release.
-
-
-
By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option:
```js [[1, 7, "onUncaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]]
@@ -612,28 +606,11 @@ export default function App() {
}
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "^5.0.0"
- },
- "main": "/index.js"
-}
-```
-
### Displaying Error Boundary errors {/*displaying-error-boundary-errors*/}
-
-
-`onCaughtError` is only available in the latest React Canary release.
-
-
-
By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option for errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary):
```js [[1, 7, "onCaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]]
@@ -902,8 +879,8 @@ function Throw({error}) {
```json package.json hidden
{
"dependencies": {
- "react": "canary",
- "react-dom": "canary",
+ "react": "19.0.0-rc-3edc000d-20240926",
+ "react-dom": "19.0.0-rc-3edc000d-20240926",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
@@ -1164,8 +1141,8 @@ function Throw({error}) {
```json package.json hidden
{
"dependencies": {
- "react": "canary",
- "react-dom": "canary",
+ "react": "19.0.0-rc-3edc000d-20240926",
+ "react-dom": "19.0.0-rc-3edc000d-20240926",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index 62ee08139..9d1533213 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -246,43 +246,41 @@ These events fire for resources like [`