diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md index 8e149634a..a6fa439fe 100644 --- a/src/content/reference/react/Profiler.md +++ b/src/content/reference/react/Profiler.md @@ -4,7 +4,7 @@ title: -`` lets you measure rendering performance of a React tree programmatically. +`` vous permet de mesurer au sein de votre code les performances de rendu d’un arbre de composants React. ```js @@ -22,7 +22,7 @@ title: ### `` {/*profiler*/} -Wrap a component tree in a `` to measure its rendering performance. +Enrobez un arbre de composants dans un `` afin de mesurer ses performances de rendu. ```js @@ -32,41 +32,41 @@ Wrap a component tree in a `` to measure its rendering performance. #### Props {/*props*/} -* `id`: A string identifying the part of the UI you are measuring. -* `onRender`: An [`onRender` callback](#onrender-callback) that React calls every time components within the profiled tree update. It receives information about what was rendered and how much time it took. +* `id` : une chaîne de caractères identifiant la portion de l’UI que vous souhaitez mesurer. +* `onRender` : une [fonction de rappel `onRender`](#onrender-callback) appelée à chaque nouveau rendu d’un composant situé dans l’arbre profilé. Elle reçoit des informations indiquant ce qui a fait l’objet ɗ un rendu et quel temps ça a pris. -#### Caveats {/*caveats*/} +#### Limitations {/*caveats*/} -* Profiling adds some additional overhead, so **it is disabled in the production build by default.** To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling) +* Le profilage alourdit un peu le moteur, il est donc **désactivé par défaut dans les *builds* de production**. Pour activer le profilage en production, vous devez utiliser un [*build* spécifique avec profilage activé](https://fb.me/react-profiling). --- -### `onRender` callback {/*onrender-callback*/} +### Fonction de rappel `onRender` {/*onrender-callback*/} -React will call your `onRender` callback with information about what was rendered. +React appellera votre fonction de rappel `onRender` avec des informations de rendu. ```js function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) { - // Aggregate or log render timings... + // Agréger ou afficher les durées de rendu... } ``` -#### Parameters {/*onrender-parameters*/} +#### Paramètres {/*onrender-parameters*/} -* `id`: The string `id` prop of the `` tree that has just committed. This lets you identify which part of the tree was committed if you are using multiple profilers. -* `phase`: `"mount"`, `"update"` or `"nested-update"`. This lets you know whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks. -* `actualDuration`: The number of milliseconds spent rendering the `` and its descendants for the current update. This indicates how well the subtree makes use of memoization (e.g. [`memo`](/reference/react/memo) and [`useMemo`](/reference/react/useMemo)). Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change. -* `baseDuration`: The number of milliseconds estimating how much time it would take to re-render the entire `` subtree without any optimizations. It is calculated by summing up the most recent render durations of each component in the tree. This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization). Compare `actualDuration` against it to see if memoization is working. -* `startTime`: A numeric timestamp for when React began rendering the current update. -* `endTime`: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable. +* `id` : la prop textuelle `id` du `` qui vient de boucler son rendu. Elle vous permet d’identifier quelle partie de l’arbre est finalisée lorsque vous utilisez plusieurs profileurs. +* `phase` : `"mount"`, `"update"` ou `"nested-update"`. Ça vous permet de savoir si l’arbre vient d’être monté pour la première fois ou a fait un nouveau rendu suite à un changement dans les props, l’état ou les hooks. +* `actualDuration` : la durée en millisecondes du rendu du `` et de ses enfants pour la mise à jour concernée. Ça indique à quel point vos descendants profitent de la mémoïsation (notamment [`memo`](/reference/react/memo) et [`useMemo`](/reference/react/useMemo)). Idéalement, cette valeur devrait décroître de façon significative après le montage initial car la plupart des descendants ne referont un rendu que si leurs props changent. +* `baseDuration` : une estimation de la durée en millisecondes que prendrait un rendu complet du `` et de ses descendants, sans aucune optimisation. Elle est calculée en ajoutant les durées de rendu les plus récentes de chaque composant concerné. Cette valeur représente le coût maximal de rendu (c’est-à-dire le temps initial de montage sans mémoïsation). Comparez-la avec `actualDuration` pour déterminer si la mémoïsation fonctionne. +* `startTime` : un horodatage numérique du début de la mise à jour par React. +* `endTime` : un horodatage numérique de la fin de la mise à jour par React. Cette valeur est partagée par tous les profileurs d’une même phase de commit, ce qui permet si besoin de les grouper. --- -## Usage {/*usage*/} +## Utilisation {/*usage*/} -### Measuring rendering performance programmatically {/*measuring-rendering-performance-programmatically*/} +### Mesurer les performances depuis votre code {/*measuring-rendering-performance-programmatically*/} -Wrap the `` component around a React tree to measure its rendering performance. +Enrobez un arbre React avec `` pour mesurer ses performances des rendu. ```js {2,4} @@ -77,25 +77,25 @@ Wrap the `` component around a React tree to measure its rendering per ``` -It requires two props: an `id` (string) and an `onRender` callback (function) which React calls any time a component within the tree "commits" an update. +Deux props sont nécessaires : une chaîne de caractères `id` et une fonction de rappel `onRender` que React appellera à chaque fois qu’un composant dans l’arbre finalisera une mise à jour (phase de “commit”). -Profiling adds some additional overhead, so **it is disabled in the production build by default.** To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling) +Le profilage alourdit un peu le moteur, il est donc **désactivé par défaut dans les *builds* de production**. Pour activer le profilage en production, vous devez utiliser un [*build* spécifique avec profilage activé](https://fb.me/react-profiling). -`` lets you gather measurements programmatically. If you're looking for an interactive profiler, try the Profiler tab in [React Developer Tools](/learn/react-developer-tools). It exposes similar functionality as a browser extension. +`` vous permet de mesurer les performances depuis votre propre code. Si vous cherchez un outil interactif, essayez l’onglet Profiler des [outils de développement](/learn/react-developer-tools). Cette extension de votre navigateur propose des fonctionnalités similaires. --- -### Measuring different parts of the application {/*measuring-different-parts-of-the-application*/} +### Mesurer différentes parties de votre application {/*measuring-different-parts-of-the-application*/} -You can use multiple `` components to measure different parts of your application: +Vous pouvez utiliser plusieurs composants `` pour mesurer différentes parties de votre application : ```js {5,7} @@ -108,7 +108,7 @@ You can use multiple `` components to measure different parts of your ``` -You can also nest `` components: +Vous pouvez aussi imbriquer des `` : ```js {5,7,9,12} @@ -126,7 +126,6 @@ You can also nest `` components: ``` -Although `` is a lightweight component, it should be used only when necessary. Each use adds some CPU and memory overhead to an application. +Bien que le composant `` soit léger, il ne devrait être utilisé que lorsque c’est nécessaire. Chaque utilisation ajoute de la charge CPU et de la consommation mémoire à une application. --- -