From 0b1b9df0e219079d3ec6370ba68afed069de8e7e Mon Sep 17 00:00:00 2001 From: linsolas Date: Wed, 13 Sep 2023 22:49:09 +0200 Subject: [PATCH 1/4] first translation --- src/content/reference/react/use.md | 154 +++++++++++++++-------------- 1 file changed, 79 insertions(+), 75 deletions(-) diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index 8e1a8f213..3634f574c 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -5,13 +5,14 @@ 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` est actuellement seulement disponible sur les canaux canary et expérimentaux de React. Apprenez-en davantage sur [les canaux de versions de React ici](/community/versioning-policy#all-release-channels). + 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). -`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 +24,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,33 +39,33 @@ 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 aux autres Hooks React, `use` peut être appelé au sein des boucles ou des instructions conditionnelles comme le `if`. À l'image des autres Hooks React, la fonction qui appelle `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 au [`Suspense`](/reference/react/Suspense) et au [périmètre d'erreur](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). Le composant appelant est *suspendu* pendant que la promesse passée à `use` est en attente. Si le composant qui appelle `use` est enrobé dans un périmètre de Suspense, l'UI de secours sera affichée. Une fois la promesse résolue, cette UI de secours est remplacée par le rendu des composants qui utilisent les données renvoyées par le Hook `use`. Si cette promesse est rejetée, l'UI de secours du périmètre d'erreur le plus proche sera 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 le source de la donnée dont 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 qui a été lue depuis la ressource, comme par exemple la valeur résolue d'une [promesse](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) ou 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 résolue. +* Privilégiez la création de promesses pour les [composants serveur](/reference/react/use-server), et passez-les aux [composants côté client](/reference/react/use-client), plutôt que de créer des promesses dans les composants côté client. Les promesses créées dans les composants côté client sont recréées lors de chaque rendu. Les promesses transmises d'un composant serveur à un component client sont stables lors des rendus. [Consultez cet exemple](#streaming-data-from-server-to-client). --- -## Usage {/*usage*/} +## Utilisation {/*usage*/} -### Reading context with `use` {/*reading-context-with-use*/} +### Lire le 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 comme `if` ou des boucles comme `for`. `use` est préférable à `useContext` parce qu'il est plus flexible. ```js [[2, 4, "theme"], [1, 4, "ThemeContext"]] import { use } from 'react'; @@ -74,9 +75,9 @@ function Button() { // ... ``` -`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 cherche dans l'arbre des composants 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 +89,13 @@ function MyPage() { } function Form() { - // ... renders buttons inside ... + // ... faire le 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 fournissuer et le `Button`. Quand un `Button`, placé *n'importe* où à l'intérieur du `Form`, appelle `use(ThemeContext)`, il recevra la valeur `"dark"`. -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 le `if`. ```js [[1, 2, "if"], [2, 3, "use"]] function HorizontalRule({ show }) { @@ -106,11 +107,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 lire des valeurs d'un contexte dans 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 pour le fournisseur de contexte le plus proche **au dessus** du composant qui l'appelle. Il cherche en remontant et **ne considère pas** les fournisseurs de contexte situés dans le composant depuis lequel vous appelez `use(context)`. @@ -131,9 +132,9 @@ export default function MyApp() { function Form() { return ( - - - + + + ); } @@ -212,9 +213,9 @@ function Button({ show, children }) { -### Streaming data from the server to the client {/*streaming-data-from-server-to-client*/} +### Diffuser des données du serveur au client en continu {/*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 du serveur au client en continu en passant une promesse comme prop depuis un composant serveur à un composant côté 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 +224,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 côté client prend ensuite la promesse qu'il a reçu comme prop et la transmet au Hook `use`. Ça permet au composant côté client de lire la valeur de la promesse qui a été créée à l'orgine par le composant serveur. ```js [[2, 6, "Message"], [4, 6, "messagePromise"], [4, 7, "messagePromise"], [5, 7, "use"]] // message.js @@ -240,10 +241,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. + +Parce que `Message` est enrobé dans un [`Suspense`](/reference/react/Suspense), l'UI de secours sera affichée en attendant la résolution de la promesse. Lorsqu'elle est résolue, la valeur sera lue par le Hook `use` et le composant `Message` remplacera l'UI de secours du Suspense. @@ -254,12 +256,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 +287,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 +327,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 passez une promesse d'un composant serveur à un composant côté client, sa valeur de résolution 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 une valeur de résolution d'une telle promesse. -#### Should I resolve a Promise in a Server or Client Component? {/*resolve-promise-in-server-or-client-component*/} +#### Dois-je résoudre une promesse sur le composant serveur ou côté 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 côté client, puis résolue dans le composant côté client avec le Hook `use`. Vous pouvez également résoudre la promesse dans un composant serveur avec `await`, puis transmettre les données requises au composant côté client en tant que prop. ```js export default function App() { @@ -343,24 +345,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 `await` dans un [composant serveur](/reference/react/components#server-components) bloquera son rendu jusqu'à ce que l'instruction `await` soit terminée. Le passage d'une promesse d'un composant serveur à un composant côté 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 des méthodes suivantes : -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. À la place de ce type de bloc, [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 +376,8 @@ import { ErrorBoundary } from "react-error-boundary"; export function MessageContainer({ messagePromise }) { return ( - ⚠️Something went wrong

}> - ⌛Downloading message...

}> + ⚠️ Quelque chose s'est mal passé

}> + ⌛ Téléchargement du message...

}> @@ -382,7 +386,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 +409,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 +448,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 +459,42 @@ 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 un message d'erreur. Ce qui est renvoyé par la fonction passée à `catch` sera utilisé comme valeur résolue de la promesse. --- -## Troubleshooting {/*troubleshooting*/} +## Dépannage {/*troubleshooting*/} ### "Suspense Exception: This is not a real error!" {/*suspense-exception-error*/} -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 `use` soit en dehors d'un composant React soit d'une fonction de Hook, ou encore vous appelez `use` dans un bloc try-catch. Si c'est ce dernier cas, enrobez votre composant dans un périmètre d'erreur ou appelez la fonction `Promise.catch` 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 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` en dehors de toute fermeture lexicale des composants, 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); // ... ``` From 3af159412a6e4d12821f6e668d0c3a2afe2737fa Mon Sep 17 00:00:00 2001 From: linsolas Date: Wed, 13 Sep 2023 23:16:42 +0200 Subject: [PATCH 2/4] personal review --- src/content/reference/react/use.md | 41 +++++++++++++++--------------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index 3634f574c..9b655da9e 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -5,8 +5,7 @@ canary: true -Le Hook `use` est actuellement seulement disponible sur les canaux canary et expérimentaux de React. Apprenez-en davantage sur [les canaux de versions de React ici](/community/versioning-policy#all-release-channels). - 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 distribution canari et expérimentaux de React. Apprenez-en davantage sur [les canaux de versions de React ici](/community/versioning-policy#all-release-channels). @@ -39,25 +38,25 @@ function MessageComponent({ messagePromise }) { // ... ``` -Contrairement aux autres Hooks React, `use` peut être appelé au sein des boucles ou des instructions conditionnelles comme le `if`. À l'image des autres Hooks React, la fonction qui appelle `use` doit être un composant ou un Hook. +Contrairement aux autres Hooks React, `use` peut être appelé au sein des boucles ou des instructions conditionnelles comme le `if`. La fonction qui appelle `use` doit cependant être un composant ou un Hook, comme les autres Hooks React. -Lorsqu'il est appelé avec une promesse, le Hook `use` s'intègre au [`Suspense`](/reference/react/Suspense) et au [périmètre d'erreur](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). Le composant appelant est *suspendu* pendant que la promesse passée à `use` est en attente. Si le composant qui appelle `use` est enrobé dans un périmètre de Suspense, l'UI de secours sera affichée. Une fois la promesse résolue, cette UI de secours est remplacée par le rendu des composants qui utilisent les données renvoyées par le Hook `use`. Si cette promesse est rejetée, l'UI de secours du périmètre d'erreur le plus proche sera affichée. +Lorsqu'il est appelé avec une promesse, le Hook `use` s'intègre au [`Suspense`](/reference/react/Suspense) et au [périmètre d'erreur](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). Le composant appelant est *suspendu* tant que la promesse passée à `use` est en attente. Si le composant qui appelle `use` est enrobé dans un périmètre de Suspense, l'UI de secours sera affichée. Une fois la promesse résolue, cette UI est remplacée par le rendu des composants qui utilisent les données renvoyées par le Hook `use`. Si cette promesse est rejetée, l'UI de secours du périmètre d'erreur le plus proche est affichée. [Voir d'autres exemples plus bas](#usage). #### Paramètres {/*parameters*/} -* `resource` : c'est le source de la donnée dont 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). +* `resource` : c'est le source de données dont 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). #### Valeur renvoyée {/*returns*/} -Le Hook `use` renvoie la valeur qui a été lue depuis la ressource, comme par exemple la valeur résolue d'une [promesse](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) ou d'un [contexte](/learn/passing-data-deeply-with-context). +Le Hook `use` renvoie la valeur qui a été lue depuis la ressource, telle que la valeur résolue d'une [promesse](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) ou d'un [contexte](/learn/passing-data-deeply-with-context). #### Limitations {/*caveats*/} * 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 résolue. -* Privilégiez la création de promesses pour les [composants serveur](/reference/react/use-server), et passez-les aux [composants côté client](/reference/react/use-client), plutôt que de créer des promesses dans les composants côté client. Les promesses créées dans les composants côté client sont recréées lors de chaque rendu. Les promesses transmises d'un composant serveur à un component client sont stables lors des rendus. [Consultez cet exemple](#streaming-data-from-server-to-client). +* Privilégiez la création de promesses pour les [composants serveur](/reference/react/use-server), et passez-les 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 lors de chaque rendu. Les promesses transmises d'un composant serveur à un component client ne changent pas entre les rendus. [Consultez cet exemple](#streaming-data-from-server-to-client). --- @@ -93,7 +92,7 @@ function Form() { } ``` -Peu importe le nombre de couches de composants qu'il y a entre le fournissuer et le `Button`. Quand un `Button`, placé *n'importe* où à l'intérieur du `Form`, appelle `use(ThemeContext)`, il recevra la valeur `"dark"`. +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"`, *quelque soit* sa position dans `Form`. Contrairement à [`useContext`](/reference/react/useContext), `use` peut être appelé dans les blocs conditionnels et les boucles comme le `if`. @@ -111,7 +110,7 @@ function HorizontalRule({ show }) { -Tout comme `useContext`, `use(context)` cherche toujours pour le fournisseur de contexte le plus proche **au dessus** du composant qui l'appelle. Il cherche en remontant et **ne considère pas** les fournisseurs de contexte situés dans le composant depuis lequel vous appelez `use(context)`. +Tout comme `useContext`, `use(context)` cherche toujours le fournisseur de contexte le plus proche **au dessus** du composant qui l'appelle. Il cherche en remontant et **ignore** les fournisseurs de contexte situés dans le composant depuis lequel vous appelez `use(context)`. @@ -213,9 +212,9 @@ function Button({ show, children }) { -### Diffuser des données du serveur au client en continu {/*streaming-data-from-server-to-client*/} +### Diffuser en continu des données du serveur au client {/*streaming-data-from-server-to-client*/} -Les données peuvent être transmises du serveur au client en continu en passant une promesse comme prop depuis un composant serveur à un composant côté client. +Les données peuvent être transmises en continu du serveur au client en passant une promesse comme prop depuis un composant serveur à 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'; @@ -231,7 +230,7 @@ export default function App() { } ``` -Le composant côté client prend ensuite la promesse qu'il a reçu comme prop et la transmet au Hook `use`. Ça permet au composant côté client de lire la valeur de la promesse qui a été créée à l'orgine par le composant serveur. +Le composant client prend ensuite la promesse qu'il a reçu comme prop et la transmet au Hook `use`. Ça permet au composant client de lire la valeur de la promesse qui a été créée initialement par le composant serveur. ```js [[2, 6, "Message"], [4, 6, "messagePromise"], [4, 7, "messagePromise"], [5, 7, "use"]] // message.js @@ -327,16 +326,16 @@ root.render( -Lorsque vous passez une promesse d'un composant serveur à un composant côté client, sa valeur de résolution 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 une valeur de résolution d'une telle promesse. +Lorsque vous transmettez une promesse d'un composant serveur à un composant client, sa valeur de résolution 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 de résolution d'une telle promesse. -#### Dois-je résoudre une promesse sur le composant serveur ou côté client ? {/*resolve-promise-in-server-or-client-component*/} +#### Dois-je résoudre une promesse sur le composant serveur ou client ? {/*resolve-promise-in-server-or-client-component*/} -Une promesse peut être passée d'un composant serveur à un composant côté client, puis résolue dans le composant côté client avec le Hook `use`. Vous pouvez également résoudre la promesse dans un composant serveur avec `await`, puis transmettre les données requises au composant côté client en tant que prop. +Une promesse peut être passée d'un composant serveur à un composant client, puis résolue dans le composant client avec le Hook `use`. Vous pouvez également résoudre 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() { @@ -345,13 +344,13 @@ export default function App() { } ``` -Toutefois, l'utilisation `await` dans un [composant serveur](/reference/react/components#server-components) bloquera son rendu jusqu'à ce que l'instruction `await` soit terminée. Le passage d'une promesse d'un composant serveur à un composant côté client permet à la promesse de ne pas bloquer le rendu du composant serveur. +Toutefois, l'utilisation du `await` dans un [composant serveur](/reference/react/components#server-components) bloquera le rendu jusqu'à ce que l'instruction `await` soit terminée. Le passage d'une promesse d'un composant serveur à un composant client permet à la promesse de ne pas bloquer le rendu du composant serveur. ### Traiter les promesses rejetées {/*dealing-with-rejected-promises*/} -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 des méthodes suivantes : +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. [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) @@ -364,7 +363,7 @@ Dans certains cas, une promesse passée à `use` peut être rejetée. Vous pouve #### Afficher une erreur aux utilisateurs dans un périmètre d'erreur {/*displaying-an-error-to-users-with-error-boundary*/} -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. +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 est affichée. @@ -470,15 +469,15 @@ export default function App() { } ``` -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 un message d'erreur. Ce qui est renvoyé par la fonction passée à `catch` sera utilisé comme valeur résolue de la promesse. +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 un message d'erreur comme argument. Ce qui est renvoyé par la fonction passée à `catch` sera utilisé comme valeur résolue de la promesse. --- ## 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*/} -Vous appelez `use` soit en dehors d'un composant React soit d'une fonction de Hook, ou encore vous appelez `use` dans un bloc try-catch. Si c'est ce dernier cas, enrobez votre composant dans un périmètre d'erreur ou appelez la fonction `Promise.catch` pour attraper l'erreur et résoudre la promesse avec une valeur différente. [Consultez ces exemples](#dealing-with-rejected-promises). +Vous appelez `use` soit en dehors d'un composant React soit d'une fonction de Hook, ou encore vous appelez `use` dans un bloc try-catch. Pour résoudre ce dernier cas, enrobez votre composant dans un périmètre d'erreur ou appelez la fonction `Promise.catch` pour attraper l'erreur et résoudre la promesse avec une valeur différente. [Consultez ces exemples](#dealing-with-rejected-promises). 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 Hook. From 228c1ea95994d30cd47cb29caf6f8a3c58c4ff86 Mon Sep 17 00:00:00 2001 From: Romain Linsolas <623217+linsolas@users.noreply.github.com> Date: Thu, 14 Sep 2023 15:30:08 +0200 Subject: [PATCH 3/4] Apply suggestions from code review Co-authored-by: Christophe Porteneuve --- src/content/reference/react/use.md | 80 +++++++++++++++--------------- 1 file changed, 41 insertions(+), 39 deletions(-) diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index 9b655da9e..6fb988214 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -5,7 +5,7 @@ canary: true -Le Hook `use` n'est actuellement disponible que sur les canaux de distribution canari et expérimentaux de React. Apprenez-en davantage sur [les canaux de versions de React ici](/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). @@ -38,33 +38,33 @@ function MessageComponent({ messagePromise }) { // ... ``` -Contrairement aux autres Hooks React, `use` peut être appelé au sein des boucles ou des instructions conditionnelles comme le `if`. La fonction qui appelle `use` doit cependant être un composant ou un Hook, comme les autres Hooks React. +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. -Lorsqu'il est appelé avec une promesse, le Hook `use` s'intègre au [`Suspense`](/reference/react/Suspense) et au [périmètre d'erreur](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). Le composant appelant est *suspendu* tant que la promesse passée à `use` est en attente. Si le composant qui appelle `use` est enrobé dans un périmètre de Suspense, l'UI de secours sera affichée. Une fois la promesse résolue, cette UI est remplacée par le rendu des composants qui utilisent les données renvoyées par le Hook `use`. Si cette promesse est rejetée, l'UI de secours du périmètre d'erreur le plus proche est affichée. +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. [Voir d'autres exemples plus bas](#usage). #### Paramètres {/*parameters*/} -* `resource` : c'est le source de données dont 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). +* `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). #### Valeur renvoyée {/*returns*/} -Le Hook `use` renvoie la valeur qui a été lue depuis la ressource, telle que la valeur résolue d'une [promesse](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) ou d'un [contexte](/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 d'un [contexte](/learn/passing-data-deeply-with-context). #### Limitations {/*caveats*/} * 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 résolue. -* Privilégiez la création de promesses pour les [composants serveur](/reference/react/use-server), et passez-les 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 lors de chaque rendu. Les promesses transmises d'un composant serveur à un component client ne changent pas entre les rendus. [Consultez cet exemple](#streaming-data-from-server-to-client). +* 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). --- ## Utilisation {/*usage*/} -### Lire le contexte avec `use` {/*reading-context-with-use*/} +### Lire un contexte avec `use` {/*reading-context-with-use*/} -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 comme `if` ou des boucles comme `for`. `use` est préférable à `useContext` parce qu'il est plus 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'; @@ -74,7 +74,7 @@ function Button() { // ... ``` -`use` renvoie la valeur de contexte pour le contexte que vous avez transmis. Pour déterminer la valeur du contexte, React cherche dans l'arbre des composants le **fournisseur de contexte parent le plus proche** pour ce contexte. +`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. Pour transmettre un contexte à un `Button`, enrobez ce bouton ou l'un de ses parents dans le fournisseur de contexte adéquat. @@ -88,13 +88,13 @@ function MyPage() { } function Form() { - // ... faire le rendu des boutons ici ... + // ... rendu des boutons ici ... } ``` -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"`, *quelque soit* sa position dans `Form`. +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`. -Contrairement à [`useContext`](/reference/react/useContext), `use` peut être appelé dans les blocs conditionnels et les boucles comme le `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` est appelé à l'intérieur d'une instruction `if`, ce qui vous permet de lire des valeurs d'un contexte dans certaines conditions. +`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. -Tout comme `useContext`, `use(context)` cherche toujours le fournisseur de contexte le plus proche **au dessus** du composant qui l'appelle. Il cherche en remontant et **ignore** les fournisseurs de contexte situés dans le composant depuis lequel vous appelez `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)`. @@ -132,7 +132,7 @@ export default function MyApp() { function Form() { return ( - + ); @@ -214,7 +214,7 @@ function Button({ show, children }) { ### Diffuser en continu des données du serveur au client {/*streaming-data-from-server-to-client*/} -Les données peuvent être transmises en continu du serveur au client en passant une promesse comme prop depuis un composant serveur à un composant client. +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 ( - En attente d'un message...

}> + En attente d’un message...

}> ); } ``` -Le composant client prend ensuite la promesse qu'il a reçu comme prop et la transmet au Hook `use`. Ça permet au composant client de lire la valeur de la promesse qui a été créée initialement par le composant serveur. +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 @@ -244,7 +244,7 @@ export function Message({ messagePromise }) { } ``` -Parce que `Message` est enrobé dans un [`Suspense`](/reference/react/Suspense), l'UI de secours sera affichée en attendant la résolution de la promesse. Lorsqu'elle est résolue, la valeur sera lue par le Hook `use` et le composant `Message` remplacera l'UI de secours du Suspense. +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. @@ -292,16 +292,16 @@ export default function App() { ``` ```js index.js hidden -// TODO : remplacer l'import d'une version canary -// de React par une version stable, dès qu'elle +// 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 : mettre à jour cet exemple pour utiliser -// le composant serveur Codesandbox de l'environnement -// de démo lorsqu'il sera créé. +// le Composant Serveur Codesandbox de l’environnement +// de démo lorsqu’il sera créé. import App from './App'; const root = createRoot(document.getElementById('root')); @@ -326,16 +326,16 @@ root.render( -Lorsque vous transmettez une promesse d'un composant serveur à un composant client, sa valeur de résolution 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 de résolution d'une telle promesse. +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. -#### Dois-je résoudre une promesse sur le composant serveur ou client ? {/*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*/} -Une promesse peut être passée d'un composant serveur à un composant client, puis résolue dans le composant client avec le Hook `use`. Vous pouvez également résoudre la promesse dans un composant serveur avec `await`, puis transmettre les données requises au composant client en tant que 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() { @@ -344,7 +344,7 @@ export default function App() { } ``` -Toutefois, l'utilisation du `await` dans un [composant serveur](/reference/react/components#server-components) bloquera le rendu jusqu'à ce que l'instruction `await` soit terminée. Le passage d'une promesse d'un composant serveur à un composant client permet à la promesse de ne pas bloquer le rendu du composant serveur. +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. @@ -357,13 +357,13 @@ Dans certains cas, une promesse passée à `use` peut être rejetée. Vous pouve -`use` ne peut pas être appelé à l'intérieur d'un bloc try-catch. À la place de ce type de bloc, [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). +`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). #### Afficher une erreur aux utilisateurs dans un périmètre d'erreur {/*displaying-an-error-to-users-with-error-boundary*/} -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 est affichée. +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. @@ -375,7 +375,7 @@ import { ErrorBoundary } from "react-error-boundary"; export function MessageContainer({ messagePromise }) { return ( - ⚠️ Quelque chose s'est mal passé

}> + ⚠️ Ça sent le pâté…

}> ⌛ Téléchargement du message...

}> @@ -414,16 +414,16 @@ export default function App() { ``` ```js index.js hidden -// TODO : remplacer l'import d'une version canary -// de React par une version stable, dès qu'elle +// 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 : mettre à jour cet exemple pour utiliser -// le composant serveur Codesandbox de l'environnement -// de démo lorsqu'il sera créé. +// le Composant Serveur Codesandbox de l’environnement +// de démo lorsqu’il sera créé. import App from './App'; const root = createRoot(document.getElementById('root')); @@ -469,7 +469,7 @@ export default function App() { } ``` -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 un message d'erreur comme argument. Ce qui est renvoyé par la fonction passée à `catch` sera utilisé comme valeur résolue de la promesse. +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. --- @@ -477,9 +477,11 @@ Pour utiliser la méthode `catch` de la promesse, ### *"Suspense Exception: This is not a real error!"* {/*suspense-exception-error*/} -Vous appelez `use` soit en dehors d'un composant React soit d'une fonction de Hook, ou encore vous appelez `use` dans un bloc try-catch. Pour résoudre ce dernier cas, enrobez votre composant dans un périmètre d'erreur ou appelez la fonction `Promise.catch` pour attraper l'erreur et résoudre la promesse avec une valeur différente. [Consultez ces exemples](#dealing-with-rejected-promises). +*(« Exception Suspense : ce n'est pas une véritable erreur ! », NdT)* -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 Hook. +Vous appelez `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 `Promise.catch` pour attraper l'erreur et résoudre la promesse avec une valeur différente. [Consultez ces exemples](#dealing-with-rejected-promises). + +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}) { @@ -489,7 +491,7 @@ function MessageComponent({messagePromise}) { // ... ``` -Appelez plutôt `use` en dehors de toute fermeture lexicale des composants, lorsque la fonction qui appelle `use` est un composant ou un 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}) { From 08e5fb27fb3a4f1f97d63c25b902dafa9450fc24 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Thu, 14 Sep 2023 16:05:13 +0200 Subject: [PATCH 4/4] copy(use): final review pass --- src/content/reference/react/use.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index 6fb988214..b4a0f83dc 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -50,7 +50,7 @@ Lorsqu'il est appelé avec une promesse, le Hook `use` s'intègre avec [`Suspens #### Valeur renvoyée {/*returns*/} -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 d'un [contexte](/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). #### Limitations {/*caveats*/} @@ -71,7 +71,7 @@ import { use } from 'react'; function Button() { const theme = use(ThemeContext); - // ... + // ... ``` `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. @@ -479,7 +479,7 @@ Pour utiliser la méthode `catch` de la promesse, *(« Exception Suspense : ce n'est pas une véritable erreur ! », NdT)* -Vous appelez `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 `Promise.catch` pour attraper l'erreur et résoudre la promesse avec une valeur différente. [Consultez ces exemples](#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). 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. @@ -495,7 +495,7 @@ Appelez plutôt `use` hors de toute fermeture lexicale au sein du composant, lor ```jsx function MessageComponent({messagePromise}) { - // ✅ `use` est appelé depuis un composant + // ✅ `use` est appelé depuis un composant const message = use(messagePromise); // ... ```