copy(render-commit): initial translation

Author: tdd

src/content/learn/render-and-commit.md

@@ -1,44 +1,44 @@
 ---
-title: Render and Commit
+title: Rendu et Commit
 ---
 
 <Intro>
 
-Before your components are displayed on screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior.
+Avant que vos composants ne soient affichés à l'écran, React doit en effectuer le rendu.  Bien comprendre les étapes de ce processus vous aidera à réfléchir à l'exécution de votre code de façon à en expliquer le comportement.
 
 </Intro>
 
 <YouWillLearn>
 
-* What rendering means in React
-* When and why React renders a component
-* The steps involved in displaying a component on screen
-* Why rendering does not always produce a DOM update
+- Ce que signifie « rendu » en React
+- Quand et pourquoi React fait le rendu d'un composant
+- Les étapes nécessaires à l'affichage d'un composant à l'écran
+- Pourquoi le rendu n'entraîne pas toujours une mise à jour du DOM
 
 </YouWillLearn>
 
-Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps:
+Imaginons que vos composants sont les membres d'une brigade de cuisine, qui confectionnent de savoureux plats à partir d'ingrédients de base.  Dans ce cas, React serait le serveur qui transmet les commandes des clients et leur ramène leurs plats.  Ce processus de requêtes et réponses liées à l'interface utilisateur *(UI pour User Interface, NdT)* comporte trois étapes :
 
-1. **Triggering** a render (delivering the guest's order to the kitchen)
-2. **Rendering** the component (preparing the order in the kitchen)
-3. **Committing** to the DOM (placing the order on the table)
+1. Le **déclenchement** du rendu (on transmet la commande du client à la cuisine)
+2. Le **rendu** du composant (on prépare la commande en cuisine)
+3. Le **commit** (la retranscription des changements) dans le DOM (on amène la commande préparée sur la table)
 
 <IllustrationBlock sequential>
-  <Illustration caption="Trigger" alt="React as a server in a restaurant, fetching orders from the users and delivering them to the Component Kitchen." src="/images/docs/illustrations/i_render-and-commit1.png" />
-  <Illustration caption="Render" alt="The Card Chef gives React a fresh Card component." src="/images/docs/illustrations/i_render-and-commit2.png" />
-  <Illustration caption="Commit" alt="React delivers the Card to the user at their table." src="/images/docs/illustrations/i_render-and-commit3.png" />
+  <Illustration caption="Déclenchement" alt="React est le serveur d’un restaurant, qui récupère les commandes des clients et les transmet à la Cuisine des Composants." src="/images/docs/illustrations/i_render-and-commit1.png" />
+  <Illustration caption="Rendu" alt="Le Chef des Cards fournit à React un composant Card fraîchement préparé." src="/images/docs/illustrations/i_render-and-commit2.png" />
+  <Illustration caption="Commit" alt="React amène le Card à la table de l'utilisateur." src="/images/docs/illustrations/i_render-and-commit3.png" />
 </IllustrationBlock>
 
-## Step 1: Trigger a render {/*step-1-trigger-a-render*/}
+## Étape 1 : déclenchement d’un rendu {/*step-1-trigger-a-render*/}
 
-There are two reasons for a component to render:
+Il y a deux déclencheurs possibles pour le rendu d'un composant :
 
-1. It's the component's **initial render.**
-2. The component's (or one of its ancestors') **state has been updated.**
+1. C'est le **rendu initial** du composant.
+2. Dans le composant (ou un de ses ancêtres), **l'état local a été mis à jour**.
 
-### Initial render {/*initial-render*/}
+### Rendu initial {/*initial-render*/}
 
-When your app starts, you need to trigger the initial render. Frameworks and sandboxes sometimes hide this code, but it's done by calling [`createRoot`](/reference/react-dom/client/createRoot) with the target DOM node, and then calling its `render` method with your component:
+Lorsque votre appli démarre, vous devez déclencher le rendu initial. Les frameworks et bacs à sable masquent parfois le code qui en est responsable, mais ça se fait en appelant [`createRoot`](/reference/react-dom/client/createRoot) avec le nœud DOM cible, puis en appelant la méthode  `render` avec votre composant :
 
 <Sandpack>
 
@@ -55,44 +55,44 @@ export default function Image() {
   return (
     <img
       src="https://i.imgur.com/ZF6s192.jpg"
-      alt="'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals"
+      alt="'Floralis Genérica' par Eduardo Catalano : une sculpture de fleur métallique gigantesque avec des pétales réfléchissants."
     />
   );
 }
 ```
 
 </Sandpack>
 
-Try commenting out the `root.render()` call and see the component disappear!
+Essayez de commenter l'appel à `root.render()` pour voir votre composant disparaître !
 
-### Re-renders when state updates {/*re-renders-when-state-updates*/}
+### Nouveaux rendus suite à des mises à jour d'état {/*re-renders-when-state-updates*/}
 
-Once the component has been initially rendered, you can trigger further renders by updating its state with the [`set` function.](/reference/react/useState#setstate) Updating your component's state automatically queues a render. (You can imagine these as a restaurant guest ordering tea, dessert, and all sorts of things after putting in their first order, depending on the state of their thirst or hunger.)
+Une fois que le composant a fait son rendu initial, vous pouvez déclencher des rendus supplémentaire en mettant à jour son état au moyen d'une [fonction `set`](/reference/react/useState#setstate). Mettre à jour l'état local d'un composant met automatiquement un rendu en file d'attente. (C'est un peu comme le convive d'un restaurant qui commanderait du thé, un dessert et plein d'autres choses après avoir passé sa commande initiale, en fonction de l'état de sa faim et de sa soif.)
 
 <IllustrationBlock sequential>
-  <Illustration caption="State update..." alt="React as a server in a restaurant, serving a Card UI to the user, represented as a patron with a cursor for their head. They patron expresses they want a pink card, not a black one!" src="/images/docs/illustrations/i_rerender1.png" />
-  <Illustration caption="...triggers..." alt="React returns to the Component Kitchen and tells the Card Chef they need a pink Card." src="/images/docs/illustrations/i_rerender2.png" />
-  <Illustration caption="...render!" alt="The Card Chef gives React the pink Card." src="/images/docs/illustrations/i_rerender3.png" />
+  <Illustration caption="Une mise à jour d'état…" alt="React est le serveur d’un restaurant, qui sert une UI Card à l'utilisateur, représenté par un convive avec un curseur en guise de tête.  Le client indique alors qu'il veut une carte rose, pas une carte noire !" src="/images/docs/illustrations/i_rerender1.png" />
+  <Illustration caption="…déclenche…" alt="React retourne dans la Cuisine des Composants et indique au Chef des Cards qu'il a besoin d'une Card rose." src="/images/docs/illustrations/i_rerender2.png" />
+  <Illustration caption="…un rendu !" alt="Le Chef des Cards donne une Card rose à React." src="/images/docs/illustrations/i_rerender3.png" />
 </IllustrationBlock>
 
-## Step 2: React renders your components {/*step-2-react-renders-your-components*/}
+## Étape 2 : rendu des composants par React {/*step-2-react-renders-your-components*/}
 
-After you trigger a render, React calls your components to figure out what to display on screen. **"Rendering" is React calling your components.**
+Après que vous avez déclenché un rendu, React appelle vos composants pour déterminer ce qu'il doit afficher à l'écran. **Le « rendu », c'est React qui appelle vos composants.**
 
-* **On initial render,** React will call the root component.
-* **For subsequent renders,** React will call the function component whose state update triggered the render.
+- **Lors du rendu initial**, React appelle le composant racine.
+- **Lors des rendus suivants**, Reat appellera les fonctions composants dont une mise à jour de l'état local a déclenché le rendu.
 
-This process is recursive: if the updated component returns some other component, React will render _that_ component next, and if that component also returns something, it will render _that_ component next, and so on. The process will continue until there are no more nested components and React knows exactly what should be displayed on screen.
+Ce processus est récursif : si le composant mis à jour renvoie un autre composant, React fera le rendu de *ce* composant-là ensuite, si celui-là renvoie à son tour un autre composant, il fera le rendu de *ce* composant-là, et ainsi de suite.  Le processus continue jusqu'à ce qu'il ne reste plus de composants imbriqués à traiter, pour que React sache exactement ce qu'il doit afficher à l'écran.
 
-In the following example, React will call `Gallery()` and  `Image()` several times:
+Dans l'exemple qui suit, React appellera `Gallery()`, puis plusieurs fois `Image()` :
 
 <Sandpack>
 
 ```js Gallery.js active
 export default function Gallery() {
   return (
     <section>
-      <h1>Inspiring Sculptures</h1>
+      <h1>Sculptures inspirantes</h1>
       <Image />
       <Image />
       <Image />
@@ -104,7 +104,7 @@ function Image() {
   return (
     <img
       src="https://i.imgur.com/ZF6s192.jpg"
-      alt="'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals"
+      alt="Floralis Genérica' par Eduardo Catalano : une sculpture de fleur métallique gigantesque avec des pétales réfléchissants."
     />
   );
 }
@@ -124,36 +124,36 @@ img { margin: 0 10px 10px 0; }
 
 </Sandpack>
 
-* **During the initial render,** React will [create the DOM nodes](https://developer.mozilla.org/docs/Web/API/Document/createElement) for `<section>`, `<h1>`, and three `<img>` tags. 
-* **During a re-render,** React will calculate which of their properties, if any, have changed since the previous render. It won't do anything with that information until the next step, the commit phase.
+- **Lors du rendu initial**, React [créera les nœuds DOM](https://developer.mozilla.org/fr/docs/Web/API/Document/createElement) pour les balises `<section>`, `<h1>` et les trois `<img>`.
+- **Lors des rendus ultérieurs**, React déterminera si certaines de leurs propriétés ont changé depuis le rendu précédent. Il gardera cette information au chaud jusqu'à l'étape suivante : la phase de commit.
 
 <Pitfall>
 
-Rendering must always be a [pure calculation](/learn/keeping-components-pure):
+Le rendu doit toujours être un [calcul pur](/learn/keeping-components-pure) :
 
-* **Same inputs, same output.** Given the same inputs, a component should always return the same JSX. (When someone orders a salad with tomatoes, they should not receive a salad with onions!)
-* **It minds its own business.** It should not change any objects or variables that existed before rendering. (One order should not change anyone else's order.)
+- **Mêmes entrées, mêmes sorties.**  Pour les mêmes données en entrée, un composant devrait toujours produire le même JSX. (Lorsque vous commandez une salade de tomates, vous ne devriez pas voir arriver une salade de concombres !)
+- **On se mêle de ses affaires.**  Un composant ne devrait pas modifier des objets ou variables qui existaient avant le rendu. (Une commande donnée ne devrait pas changer la commande de quelqu'un d'autre.)
 
-Otherwise, you can encounter confusing bugs and unpredictable behavior as your codebase grows in complexity. When developing in "Strict Mode", React calls each component's function twice, which can help surface mistakes caused by impure functions.
+En enfreignant ces règles, attendez-vous à des bugs déroutants et des comportements inattendus au fil de la croissance de votre base de code.  Lorsqu'on développe en « mode strict », React appelle deux fois la fonction de chaque composant, ce qui aide à repérer les erreurs dues à des fonctions « impures ».
 
 </Pitfall>
 
 <DeepDive>
 
-#### Optimizing performance {/*optimizing-performance*/}
+#### Optimiser les performances {/*optimizing-performance*/}
 
-The default behavior of rendering all components nested within the updated component is not optimal for performance if the updated component is very high in the tree. If you run into a performance issue, there are several opt-in ways to solve it described in the [Performance](https://reactjs.org/docs/optimizing-performance.html) section. **Don't optimize prematurely!**
+Le comportement par défaut, qui fait le rendu de tous les composants enveloppés par le composant mis à jour, n'est pas optimal pour les performances lorsque le composant mis à jour est situé très haut dans l'arbre.  Si vous constatez un souci avéré de performances, vous disposez de plusieurs options à mettre en place explicitement pour résoudre ça ; elles sont décrites dans la section [Performance](https://reactjs.org/docs/optimizing-performance.html). **Évitez les optimisations prématurées !**
 
 </DeepDive>
 
-## Step 3: React commits changes to the DOM {/*step-3-react-commits-changes-to-the-dom*/}
+## Étape 3 : commit dans le DOM par React {/*step-3-react-commits-changes-to-the-dom*/}
 
-After rendering (calling) your components, React will modify the DOM. 
+Après avoir fait le rendu de vos composants (c'est-à-dire après avoir appelé leurs fonctions), React devra mettre à jour le DOM.
 
-* **For the initial render,** React will use the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen. 
-* **For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
+- **Lors du rendu initial**, React utilisera l'API DOM [`appendChild()`](https://developer.mozilla.org/fr/docs/Web/API/Node/appendChild) pour injecter à l'écran tous les nœuds DOM qu'il a créés.
+- **Lors des rendus ultérieurs**, React s'attachera à effectuer le strict minimum d'opérations nécessaires (qu'il aura déterminées lors du rendu !) pour mettre le DOM en correspondance avec le résultat du dernier rendu en date.
 
-**React only changes the DOM nodes if there's a difference between renders.** For example, here is a component that re-renders with different props passed from its parent every second. Notice how you can add some text into the `<input>`, updating its `value`, but the text doesn't disappear when the component re-renders:
+**React ne modifie les nœuds DOM que s'il y a un écart d'un rendu à l'autre.**  Par exemple, voici un composant qui refait son rendu avec des props différentes passées depuis son parent à chaque seconde.  Remarquez que vous pouvez ajouter du texte dans l'`<input>`, modifier sa `value`, mais le texte ne disparaît pas quand le composant refait son rendu :
 
 <Sandpack>
 
@@ -193,21 +193,21 @@ export default function App() {
 
 </Sandpack>
 
-This works because during this last step, React only updates the content of `<h1>` with the new `time`. It sees that the `<input>` appears in the JSX in the same place as last time, so React doesn't touch the `<input>`—or its `value`!
-## Epilogue: Browser paint {/*epilogue-browser-paint*/}
+Ça fonctionne parce qu'à l'étape précédente, React n'a mis à jour que le contenu du `<h1>`, avec le nouveau `time`.  Il constate qu'un `<input/>` est présent dans le JSX au même endroit que la dernière fois, avec les mêmes props (il n'en a pas), aussi React ne touche-t-il pas à l'`<input/>`--pas plus qu'à sa `value` !
 
-After rendering is done and React updated the DOM, the browser will repaint the screen. Although this process is known as "browser rendering", we'll refer to it as "painting" to avoid confusion throughout the docs.
+## Épilogue : Dessin par le navigateur *(Browser Paint)* {/*epilogue-browser-paint*/}
 
-<Illustration alt="A browser painting 'still life with card element'." src="/images/docs/illustrations/i_browser-paint.png" />
+Une fois que React a mis à jour le DOM en se basant sur les résultats du rendu, le navigateur va devoir redessiner l'écran. Même si ce procédé est souvent appelé « rendu » *(“rendering”, NdT)*, nous parlerons plutôt dans cette documentation de « dessin » *(“painting”, NdT)* pour éviter toute confusion.
+
+<Illustration alt="Un navigateur dessine « nature morte avec l’élément carte »." src="/images/docs/illustrations/i_browser-paint.png" />
 
 <Recap>
 
-* Any screen update in a React app happens in three steps:
-  1. Trigger
-  2. Render
+- Toute mise à jour à l'écran dans une appli React se déroule en trois temps :
+  1. Déclenchement
+  2. Rendu
   3. Commit
-* You can use Strict Mode to find mistakes in your components
-* React does not touch the DOM if the rendering result is the same as last time
+- Vous pouvez tirer parti du Mode Strict pour repérer les erreurs dans vos composants
+- React ne touchera pas au DOM si le résultat du rendu est identique d'une fois sur l'autre
 
 </Recap>
-