+<<<<<<< HEAD
+=======
+
+
+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 ...
+
+
+
+
+>>>>>>> 69edd845b9a654c6ac9ed68da19d5b42897e636e
Nous avions annoncé la sortie expérimentale de React Compiler lors de la React Conf 2024. Nous avons beaucoup avancé depuis, et dans cet article nous aimerions partager avec vous la suite de nos travaux sur ce compilateur…
@@ -27,6 +37,7 @@ Dans le guide de migration vers React 19 RC, nous vous donnions des instructions
+<<<<<<< HEAD
Les améliorations apportées par React 19 RC nécessitent quelques ruptures de compatibilité, mais nous avons travaillé dur pour faciliter la mise à jour le plus possible, et nous ne nous attendons pas à ce que ces changements impactent la majorité des applications. Dans cet article, nous vous guidons étape par étape pour mettre à jour vos applis et bibliothèques vers React 19…
@@ -34,6 +45,9 @@ Les améliorations apportées par React 19 RC nécessitent quelques ruptures de
+=======
+
+>>>>>>> 69edd845b9a654c6ac9ed68da19d5b42897e636e
Dans les billets React Labs, nous vous parlons de nos projets de recherche et développement actifs. Depuis notre dernier bulletin, nous avons fait des progrès significatifs sur le React Compiler et React 19, et nous aimerions partager ce que nous avons appris.
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index d24f89f77..f22b285cc 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);
- }
+ };
}}
>
![]()
Dans cet exemple, `itemRef` ne référence pas un unique nœud DOM. Il contient plutôt une [Map](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Map) associant chaque ID d'élément à un nœud DOM. ([Les refs peuvent stocker n'importe quelle valeur !](/learn/referencing-values-with-refs)) La [fonction de rappel `ref`](/reference/react-dom/components/common#ref-callback) sur chaque élément de la liste s'occupe de mettre à jour les correspondances :
@@ -331,6 +321,7 @@ Dans cet exemple, `itemRef` ne référence pas un unique nœud DOM. Il contient
key={cat.id}
ref={node => {
const map = getMap();
+<<<<<<< HEAD
if (node) {
// Ajoute à la Map
map.set(cat, node);
@@ -353,6 +344,8 @@ This example shows another approach for managing the Map with a `ref` callback c
key={cat.id}
ref={node => {
const map = getMap();
+=======
+>>>>>>> 69edd845b9a654c6ac9ed68da19d5b42897e636e
// Add to the Map
map.set(cat, node);
@@ -364,7 +357,15 @@ This example shows another approach for managing the Map with a `ref` callback c
>
```
-
+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 6f761b035..3fdcc77e1 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -49,7 +49,14 @@ Une appli entièrement construite en React n'aura généralement qu'un appel à
* `onRecoverableError` **optionnelle** : fonction de rappel appelée lorsque React retombe automatiquement sur ses pieds suite à une erreur. Appelée avec l’`error` levée par React et un objet `errorInfo` contenant la `componentStack`. Certaines de ces erreurs peuvent exposer leur cause originelle dans `error.cause`.
* `identifierPrefix` **optionnel** : un préfixe textuel utilisé pour les ID générés par [`useId`](/reference/react/useId). Pratique pour éviter les conflits entre les ID au sein de racines multiples sur une même page.
+<<<<<<< HEAD
#### Valeur renvoyée {/*returns*/}
+=======
+ * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
+ * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`.
+ * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with an `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
+ * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page.
+>>>>>>> 69edd845b9a654c6ac9ed68da19d5b42897e636e
`createRoot` renvoie un objet avec deux méthodes : [`render`](#root-render) et [`unmount`](#root-unmount).
@@ -343,6 +350,7 @@ Il est toutefois rare d'appeler `render` plusieurs fois. En général, vos comp
### Afficher un dialogue lors d'erreurs non capturées {/*show-a-dialog-for-uncaught-errors*/}
+<<<<<<< HEAD
`onUncaughtError` n'est disponible que dans la dernière version React Canary.
@@ -350,6 +358,9 @@ Il est toutefois rare d'appeler `render` plusieurs fois. En général, vos comp
Par défaut, React affichera dans la console toute erreur non capturée. Pour implémenter votre propre signalement, vous pouvez fournir l'option `onUncaughtError` :
+=======
+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:
+>>>>>>> 69edd845b9a654c6ac9ed68da19d5b42897e636e
```js [[1, 6, "onUncaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
import { createRoot } from 'react-dom/client';
@@ -576,21 +587,11 @@ export default function App() {
}
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "^5.0.0"
- },
- "main": "/index.js"
-}
-```
-
### Afficher les erreurs de Périmètres d'Erreurs {/*displaying-error-boundary-errors*/}
+<<<<<<< HEAD
`onCaughtError` n'est disponible que dans la dernière version React Canary.
@@ -598,6 +599,9 @@ export default function App() {
Par défaut, React affichera dans la console (au moyen de `console.error`) toute erreur capturée par un Périmètre d'Erreurs. Pour remplacer ce comportement, vous pouvez fournir l'option `onCaughtError` afin de traiter vous-mêmes les erreurs capturées par un [Périmètre d'Erreurs](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) :
+=======
+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):
+>>>>>>> 69edd845b9a654c6ac9ed68da19d5b42897e636e
```js [[1, 6, "onCaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
import { createRoot } from 'react-dom/client';
@@ -863,8 +867,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"
},
@@ -1121,8 +1125,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 92e6ec097..fa313249a 100644
--- a/src/content/reference/react-dom/client/hydrateRoot.md
+++ b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -41,10 +41,17 @@ React s'attachera au HTML existant à l'intérieur de `domNode`, et prendra la m
* `options` **optionnelles** : un objet avec des options pour la racine React.
+<<<<<<< HEAD
*
`onUncaughtError` n'est disponible que dans la dernière version React Canary.
@@ -380,6 +388,9 @@ Il est toutefois rare d'appeler [`root.render`](#root-render) sur une racine hyd
Par défaut, React affichera dans la console toute erreur non capturée. Pour implémenter votre propre signalement, vous pouvez fournir l'option `onUncaughtError` :
+=======
+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:
+>>>>>>> 69edd845b9a654c6ac9ed68da19d5b42897e636e
```js [[1, 7, "onUncaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]]
import { hydrateRoot } from 'react-dom/client';
@@ -607,21 +618,11 @@ export default function App() {
}
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "^5.0.0"
- },
- "main": "/index.js"
-}
-```
-
### Afficher les erreurs de Périmètres d'Erreurs {/*displaying-error-boundary-errors*/}
+<<<<<<< HEAD
`onCaughtError` n'est disponible que dans la dernière version React Canary.
@@ -630,6 +631,9 @@ export default function App() {
Par défaut, React affichera dans la console (au moyen de `console.error`) toute erreur capturée par un Périmètre d'Erreurs. Pour remplacer ce comportement, vous pouvez fournir l'option `onCaughtError` afin de traiter vous-mêmes les erreurs capturées par un [Périmètre d'Erreurs](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) :
+=======
+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):
+>>>>>>> 69edd845b9a654c6ac9ed68da19d5b42897e636e
```js [[1, 7, "onCaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]]
import { hydrateRoot } from 'react-dom/client';
@@ -895,8 +899,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"
},
@@ -1152,8 +1156,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 b689fc043..c455e9f49 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -246,6 +246,7 @@ Ces événements sont déclenchés pour les ressources comme [`