diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md
index 8e1a8f213..b4a0f83dc 100644
--- a/src/content/reference/react/use.md
+++ b/src/content/reference/react/use.md
@@ -5,13 +5,13 @@ canary: true
-The `use` Hook is currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+Le Hook `use` n'est actuellement disponible que sur les canaux de livraison Canary et Expérimental de React. Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
-`use` is a React Hook that lets you read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context).
+`use` est un Hook React qui vous permet de lire la valeur d'une ressource telle qu'une [promesse](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) ou un [contexte](/learn/passing-data-deeply-with-context).
```js
const value = use(resource);
@@ -23,11 +23,11 @@ const value = use(resource);
---
-## Reference {/*reference*/}
+## Référence {/*reference*/}
### `use(resource)` {/*use*/}
-Call `use` in your component to read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context).
+Appelez `use` dans votre composant pour lire la valeur d'une ressource telle qu'une [promesse](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) ou un [contexte](/learn/passing-data-deeply-with-context).
```jsx
import { use } from 'react';
@@ -38,45 +38,45 @@ function MessageComponent({ messagePromise }) {
// ...
```
-Unlike all other React Hooks, `use` can be called within loops and conditional statements like `if`. Like other React Hooks, the function that calls `use` must be a Component or Hook.
+Contrairement à tous les autres Hooks React, `use` peut être appelé au sein de boucles ou d'instructions conditionnelles telles que `if`. En revanche, comme pour les autres Hooks React, toute fonction appelant `use` doit être un composant ou un Hook.
-When called with a Promise, the `use` Hook integrates with [`Suspense`](/reference/react/Suspense) and [error boundaries](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). The component calling `use` *suspends* while the Promise passed to `use` is pending. If the component that calls `use` is wrapped in a Suspense boundary, the fallback will be displayed. Once the Promise is resolved, the Suspense fallback is replaced by the rendered components using the data returned by the `use` Hook. If the Promise passed to `use` is rejected, the fallback of the nearest Error Boundary will be displayed.
+Lorsqu'il est appelé avec une promesse, le Hook `use` s'intègre avec [`Suspense`](/reference/react/Suspense) et les [périmètres d'erreurs](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). Le composant appelant *suspend* tant que la promesse passée à `use` est en attente. Si le composant qui appelle `use` est enrobé dans un périmètre Suspense, l'UI de secours est affichée. Une fois la promesse accomplie, cette UI est remplacée par le rendu des composants en utilisant les données renvoyées par le Hook `use`. Si la promesse renvoyée par `use` est rejetée, l'UI de secours du périmètre d'erreur le plus proche est affichée.
-[See more examples below.](#usage)
+[Voir d'autres exemples plus bas](#usage).
-#### Parameters {/*parameters*/}
+#### Paramètres {/*parameters*/}
-* `resource`: this is the source of the data you want to read a value from. A resource can be a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or a [context](/learn/passing-data-deeply-with-context).
+* `resource` : c'est la source de données depuis laquelle vous voulez lire une valeur. Une ressource peut être une [promesse](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) ou un [contexte](/learn/passing-data-deeply-with-context).
-#### Returns {/*returns*/}
+#### Valeur renvoyée {/*returns*/}
-The `use` Hook returns the value that was read from the resource like the resolved value of a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context).
+Le Hook `use` renvoie la valeur lue depuis la ressource, telle que la valeur accomplie d'une [promesse](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) ou la valeur actuelle d'un [contexte](/learn/passing-data-deeply-with-context).
-#### Caveats {/*caveats*/}
+#### Limitations {/*caveats*/}
-* The `use` Hook must be called inside a Component or a Hook.
-* When fetching data in a [Server Component](/reference/react/use-server), prefer `async` and `await` over `use`. `async` and `await` pick up rendering from the point where `await` was invoked, whereas `use` re-renders the component after the data is resolved.
-* Prefer creating Promises in [Server Components](/reference/react/use-server) and passing them to [Client Components](/reference/react/use-client) over creating Promises in Client Components. Promises created in Client Components are recreated on every render. Promises passed from a Server Component to a Client Component are stable across re-renders. [See this example](#streaming-data-from-server-to-client).
+* Le Hook `use` doit être appelé à l'intérieur d'un composant ou d'un Hook.
+* Lorsque vous récupérez des données dans un [Composant Serveur](/reference/react/use-server), privilégiez `async` et `await` plutôt que `use`. `async` et `await` reprennent le rendu à partir du point où `await` avait été invoqué, alors que `use` refait un rendu du composant une fois la donnée obtenue.
+* Privilégiez la création de promesses dans les [Composants Serveur](/reference/react/use-server) et leur passage aux [Composants Client](/reference/react/use-client), plutôt que de créer des promesses dans les Composants Client. Les promesses créées dans les Composants Client sont recréées à chaque rendu. Les promesses transmises d'un Composant Serveur à un Component Client ne changent pas d'un rendu à l'autre. [Consultez cet exemple](#streaming-data-from-server-to-client).
---
-## Usage {/*usage*/}
+## Utilisation {/*usage*/}
-### Reading context with `use` {/*reading-context-with-use*/}
+### Lire un contexte avec `use` {/*reading-context-with-use*/}
-When a [context](/learn/passing-data-deeply-with-context) is passed to `use`, it works similarly to [`useContext`](/reference/react/useContext). While `useContext` must be called at the top level of your component, `use` can be called inside conditionals like `if` and loops like `for`. `use` is preferred over `useContext` because it is more flexible.
+Quand un [contexte](/learn/passing-data-deeply-with-context) est passé à `use`, ce dernier fonctionne de la même façon que [`useContext`](/reference/react/useContext). Alors que `useContext` doit être appelé à la racine de votre composant, `use` peut être appelé à l'intérieur de conditions telles que `if` ou de boucles telles que `for`. `use` est préférable à `useContext` parce qu'il est plus flexible.
```js [[2, 4, "theme"], [1, 4, "ThemeContext"]]
import { use } from 'react';
function Button() {
const theme = use(ThemeContext);
- // ...
+ // ...
```
-`use` returns the context value for the context you passed. To determine the context value, React searches the component tree and finds **the closest context provider above** for that particular context.
+`use` renvoie la valeur de contexte pour le contexte que vous avez transmis. Pour déterminer la valeur du contexte, React remonte l'arbre des composants pour trouver le **fournisseur de contexte parent le plus proche** pour ce contexte.
-To pass context to a `Button`, wrap it or one of its parent components into the corresponding context provider.
+Pour transmettre un contexte à un `Button`, enrobez ce bouton ou l'un de ses parents dans le fournisseur de contexte adéquat.
```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]]
function MyPage() {
@@ -88,13 +88,13 @@ function MyPage() {
}
function Form() {
- // ... renders buttons inside ...
+ // ... rendu des boutons ici ...
}
```
-It doesn't matter how many layers of components there are between the provider and the `Button`. When a `Button` *anywhere* inside of `Form` calls `use(ThemeContext)`, it will receive `"dark"` as the value.
+Peu importe le nombre de couches de composants qu'il y a entre le fournisseur et le `Button`. Quand un `Button` appelle `use(ThemeContext)`, il recevra la valeur `"dark"`, *quelle que soit* sa position au sein du `Form`.
-Unlike [`useContext`](/reference/react/useContext), `use` can be called in conditionals and loops like `if`.
+Contrairement à [`useContext`](/reference/react/useContext), `use` peut être appelé dans les blocs conditionnels et les boucles, comme par exemple un `if`.
```js [[1, 2, "if"], [2, 3, "use"]]
function HorizontalRule({ show }) {
@@ -106,11 +106,11 @@ function HorizontalRule({ show }) {
}
```
-`use` is called from inside a `if` statement, allowing you to conditionally read values from a Context.
+`use` est appelé à l'intérieur d'une instruction `if`, ce qui vous permet de ne lire des valeurs de contextes que sous certaines conditions.
-Like `useContext`, `use(context)` always looks for the closest context provider *above* the component that calls it. It searches upwards and **does not** consider context providers in the component from which you're calling `use(context)`.
+Tout comme `useContext`, `use(context)` cherche toujours le fournisseur de contexte le plus proche **au-dessus** du composant qui l'appelle. Il remonte et **ignore** les fournisseurs de contexte situés dans le composant depuis lequel vous appelez `use(context)`.
@@ -131,9 +131,9 @@ export default function MyApp() {
function Form() {
return (
-
-
-
+
+
+
);
}
@@ -212,9 +212,9 @@ function Button({ show, children }) {
-### Streaming data from the server to the client {/*streaming-data-from-server-to-client*/}
+### Diffuser en continu des données du serveur au client {/*streaming-data-from-server-to-client*/}
-Data can be streamed from the server to the client by passing a Promise as a prop from a Server Component to a Client Component.
+Les données peuvent être transmises en continu du serveur au client en passant une promesse comme prop depuis un Composant Serveur vers un Composant Client.
```js [[1, 4, "App"], [2, 2, "Message"], [3, 7, "Suspense"], [4, 8, "messagePromise", 30], [4, 5, "messagePromise"]]
import { fetchMessage } from './lib.js';
@@ -223,14 +223,14 @@ import { Message } from './message.js';
export default function App() {
const messagePromise = fetchMessage();
return (
- waiting for message...}>
+ En attente d’un message...}>
);
}
```
-The Client Component then takes the Promise it received as a prop and passes it to the `use` Hook. This allows the Client Component to read the value from the Promise that was initially created by the Server Component.
+Le Composant Client prend ensuite la promesse qu'il a reçue comme prop et la transmet au Hook `use`. Ça permet au Composant Client de lire la valeur de la promesse initialement créée par le Composant Serveur.
```js [[2, 6, "Message"], [4, 6, "messagePromise"], [4, 7, "messagePromise"], [5, 7, "use"]]
// message.js
@@ -240,10 +240,11 @@ import { use } from 'react';
export function Message({ messagePromise }) {
const messageContent = use(messagePromise);
- return
Here is the message: {messageContent}
;
+ return
Voici le message : {messageContent}
;
}
```
-Because `Message` is wrapped in [`Suspense`](/reference/react/Suspense), the fallback will be displayed until the Promise is resolved. When the Promise is resolved, the value will be read by the `use` Hook and the `Message` component will replace the Suspense fallback.
+
+Puisque `Message` est enrobé dans un [`Suspense`](/reference/react/Suspense), l'UI de secours sera affichée en attendant l'accomplissement de la promesse. Lorsqu'elle s'accomplit, la valeur sera lue par le Hook `use` et le composant `Message` remplacera l'UI de secours de Suspense.
@@ -254,12 +255,12 @@ import { use, Suspense } from "react";
function Message({ messagePromise }) {
const messageContent = use(messagePromise);
- return
Here is the message: {messageContent}
;
+ return
Voici le message : {messageContent}
;
}
export function MessageContainer({ messagePromise }) {
return (
- ⌛Downloading message...}>
+ ⌛ Téléchargement du message...}>
);
@@ -285,22 +286,22 @@ export default function App() {
if (show) {
return ;
} else {
- return ;
+ return ;
}
}
```
```js index.js hidden
-// TODO: update to import from stable
-// react instead of canary once the `use`
-// Hook is in a stable release of React
+// TODO : remplacer l’import d’une version Canary
+// de React par une version stable, dès qu’elle
+// intégrera le Hook `use`
import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';
-// TODO: update this example to use
-// the Codesandbox Server Component
-// demo environment once it is created
+// TODO : mettre à jour cet exemple pour utiliser
+// le Composant Serveur Codesandbox de l’environnement
+// de démo lorsqu’il sera créé.
import App from './App';
const root = createRoot(document.getElementById('root'));
@@ -325,16 +326,16 @@ root.render(
-When passing a Promise from a Server Component to a Client Component, its resolved value must be serializable to pass between server and client. Data types like functions aren't serializable and cannot be the resolved value of such a Promise.
+Lorsque vous transmettez une promesse d'un Composant Serveur à un Composant Client, sa valeur accomplie doit être sérialisable pour pouvoir être communiquée entre le serveur et le client. Les types de données comme les fonctions ne sont pas sérialisables et ne peuvent donc pas être utilisés comme valeur accomplie d'une telle promesse.
-#### Should I resolve a Promise in a Server or Client Component? {/*resolve-promise-in-server-or-client-component*/}
+#### Dois-je accomplir une promesse dans un Composant Serveur ou Client ? {/*resolve-promise-in-server-or-client-component*/}
-A Promise can be passed from a Server Component to a Client Component and resolved in the Client component with the `use` Hook. You can also resolve the Promise in a Server Component with `await` and pass the required data to the Client Component as a prop.
+Une promesse peut être passée d'un Composant Serveur à un Composant Client, puis accomplie dans le Composant Client avec le Hook `use`. Vous pouvez également accomplir la promesse dans un Composant Serveur avec `await`, puis transmettre les données requises au Composant Client en tant que prop.
```js
export default function App() {
@@ -343,24 +344,26 @@ export default function App() {
}
```
-But using `await` in a [Server Component](/reference/react/components#server-components) will block its rendering until the `await` statement is finished. Passing a Promise from a Server Component to a Client Component prevents the Promise from blocking the rendering of the Server Component.
+Toutefois, l'utilisation d'`await` dans un [Composant Serveur](/reference/react/components#server-components) bloquera son rendu jusqu'à ce que l'instruction `await` ait terminé. Le passage d'une promesse d'un Composant Serveur à un Composant Client permet à la promesse de ne pas bloquer le rendu du Composant Serveur.
-### Dealing with rejected Promises {/*dealing-with-rejected-promises*/}
+### Traiter les promesses rejetées {/*dealing-with-rejected-promises*/}
-In some cases a Promise passed to `use` could be rejected. You can handle rejected Promises by either:
+Dans certains cas, une promesse passée à `use` peut être rejetée. Vous pouvez gérer les promesses rejetées en utilisant l'une ou l'autre de ces méthodes :
-1. [Displaying an error to users with error boundary.](#displaying-an-error-to-users-with-error-boundary)
-2. [Providing an alternative value with `Promise.catch`](#providing-an-alternative-value-with-promise-catch)
+1. [afficher une erreur aux utilisateurs avec un périmètre d'erreur](#displaying-an-error-to-users-with-error-boundary)
+2. [fournir une valeur alternative avec `Promise.catch`](#providing-an-alternative-value-with-promise-catch)
-`use` cannot be called in a try-catch block. Instead of a try-catch block [wrap your component in an Error Boundary](#displaying-an-error-to-users-with-error-boundary), or [provide an alternative value to use with the Promise's `.catch` method](#providing-an-alternative-value-with-promise-catch).
+
+`use` ne peut pas être appelé à l'intérieur d'un bloc try-catch. En remplacement de ces blocs, [enrobez votre composant dans un périmètre d'erreur](#displaying-an-error-to-users-with-error-boundary), ou [fournissez une valeur alternative à utiliser avec la méthode `.catch` des promesses](#providing-an-alternative-value-with-promise-catch).
+
-#### Displaying an error to users with a error boundary {/*displaying-an-error-to-users-with-error-boundary*/}
+#### Afficher une erreur aux utilisateurs dans un périmètre d'erreur {/*displaying-an-error-to-users-with-error-boundary*/}
-If you'd like to display an error to your users when a Promise is rejected, you can use an [error boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). To use an error boundary, wrap the component where you are calling the `use` Hook in an error boundary. If the Promise passed to `use` is rejected the fallback for the error boundary will be displayed.
+Si vous souhaitez afficher une erreur à vos utilisateurs quand une promesse a été rejetée, vous pouvez utiliser un [périmètre d'erreur](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). Pour l'utiliser, enrobez le composant d'où vous appelez le Hook `use` dans le périmètre d'erreur. Si la promesse transmise à `use` est rejetée, alors l'UI de secours de ce périmètre d'erreur sera affichée.
@@ -372,8 +375,8 @@ import { ErrorBoundary } from "react-error-boundary";
export function MessageContainer({ messagePromise }) {
return (
- ⚠️Something went wrong}>
- ⌛Downloading message...}>
+ ⚠️ Ça sent le pâté…}>
+ ⌛ Téléchargement du message...}>
@@ -382,7 +385,7 @@ export function MessageContainer({ messagePromise }) {
function Message({ messagePromise }) {
const content = use(messagePromise);
- return
Here is the message: {content}
;
+ return
Voici le message : {content}
;
}
```
@@ -405,22 +408,22 @@ export default function App() {
if (show) {
return ;
} else {
- return ;
+ return ;
}
}
```
```js index.js hidden
-// TODO: update to import from stable
-// react instead of canary once the `use`
-// Hook is in a stable release of React
+// TODO : remplacer l’import d’une version Canary
+// de React par une version stable, dès qu’elle
+// intégrera le Hook `use`
import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';
-// TODO: update this example to use
-// the Codesandbox Server Component
-// demo environment once it is created
+// TODO : mettre à jour cet exemple pour utiliser
+// le Composant Serveur Codesandbox de l’environnement
+// de démo lorsqu’il sera créé.
import App from './App';
const root = createRoot(document.getElementById('root'));
@@ -444,9 +447,9 @@ root.render(
```
-#### Providing an alternative value with `Promise.catch` {/*providing-an-alternative-value-with-promise-catch*/}
+#### Fournir une valeur alternative avec `Promise.catch` {/*providing-an-alternative-value-with-promise-catch*/}
-If you'd like to provide an alternative value when the Promise passed to `use` is rejected you can use the Promise's [`catch`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) method.
+Si vous voulez fournir une valeur alternative quand la promesse passée à `use` est rejetée, vous pouvez utiliser la méthode [`catch`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) des promesses.
```js [[1, 6, "catch"],[2, 7, "return"]]
import { Message } from './message.js';
@@ -455,42 +458,44 @@ export default function App() {
const messagePromise = new Promise((resolve, reject) => {
reject();
}).catch(() => {
- return "no new message found.";
+ return "Aucun nouveau message.";
});
return (
- waiting for message...}>
+ En attente de message...}>
);
}
```
-To use the Promise's `catch` method, call `catch` on the Promise object. `catch` takes a single argument: a function that takes an error message as an argument. Whatever is returned by the function passed to `catch` will be used as the resolved value of the Promise.
+Pour utiliser la méthode `catch` de la promesse, appelez `catch` sur l'objet `Promise`. `catch` n'accepte qu'un seul paramètre : une fonction qui prend une erreur comme argument. La valeur de retour de la fonction passée à `catch` sera utilisée comme valeur accomplie de la promesse.
---
-## Troubleshooting {/*troubleshooting*/}
+## Dépannage {/*troubleshooting*/}
+
+### *"Suspense Exception: This is not a real error!"* {/*suspense-exception-error*/}
-### "Suspense Exception: This is not a real error!" {/*suspense-exception-error*/}
+*(« Exception Suspense : ce n'est pas une véritable erreur ! », NdT)*
-You are either calling `use` outside of a React component or Hook function, or calling `use` in a try–catch block. If you are calling `use` inside a try–catch block, wrap your component in an error boundary, or call the Promise's `catch` to catch the error and resolve the Promise with another value. [See these examples](#dealing-with-rejected-promises).
+Vous appelez probablement `use` soit en-dehors d'un composant React ou d'une fonction de Hook, soit dans un bloc try-catch. Pour corriger ce dernier cas, enrobez votre composant dans un périmètre d'erreur ou appelez la fonction `catch` de la promesse pour attraper l'erreur et résoudre la promesse avec une valeur différente. [Consultez ces exemples](#dealing-with-rejected-promises).
-If you are calling `use` outside a React component or Hook function, move the `use` call to a React component or Hook function.
+Si vous appelez `use` en-dehors d'un composant React ou d'une fonction de Hook, déplacez l'appel à `use` dans un composant React ou une fonction de Hook.
```jsx
function MessageComponent({messagePromise}) {
function download() {
- // ❌ the function calling `use` is not a Component or Hook
+ // ❌ la fonction appelant `use` n'est ni un composant ni un Hook
const message = use(messagePromise);
// ...
```
-Instead, call `use` outside any component closures, where the function that calls `use` is a component or Hook.
+Appelez plutôt `use` hors de toute fermeture lexicale au sein du composant, lorsque la fonction qui appelle `use` est un composant ou un Hook.
```jsx
function MessageComponent({messagePromise}) {
- // ✅ `use` is being called from a component.
+ // ✅ `use` est appelé depuis un composant
const message = use(messagePromise);
// ...
```