From c9b5837e1c924bc68d3a0138528ffd62820ce644 Mon Sep 17 00:00:00 2001 From: Bastien Dumont Date: Mon, 1 May 2023 20:58:19 +0200 Subject: [PATCH 1/5] wip --- src/content/reference/react/Profiler.md | 29 ++++++++++++------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md index 8e149634a..6c920f72b 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 les performance de rendu d'un arbre React. ```js @@ -22,7 +22,7 @@ title: ### `` {/*profiler*/} -Wrap a component tree in a `` to measure its rendering performance. +Enrober un arbre de composant dans un `` afin de mesurer ses performances de rendu. ```js @@ -32,31 +32,31 @@ 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ère identifiant le composant que vous souhaitez mesurer. +* `onRender`: Une [fonction de rappel `onRender`](#onrender-callback) appelée à chaque nouveau rendu d'un composant situé l'arbre profilé. Elle reçoit les informations de rendu tel que le composant et la durée prise. -#### 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 une certaine lourdeur, il est ainsi **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*/} +### `onRender` fonction de rappel {/*onrender-callback*/} -React will call your `onRender` callback with information about what was rendered. +React va appeler votre fonction de rappel `onRender` avec les informations de rendu. ```js function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) { - // Aggregate or log render timings... + // Agréger ou afficher la durée 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. +* `id`: La chaîne de caractère `id` utilisée en prop de l'arbre ``. Elle vous permet d'identifier quelles partie de l'arbre re-rendu en cas de co-existence de profiler. +* `phase`: `"mount"`, `"update"` ou `"nested-update"`. Ça vous permet de savoir si l'arbre a été monté pour la première fois ou re-monté à cause d'un changement dans les props, state ou hooks. +* `actualDuration`: La durée en millisecondes écoulée pendant le rendu de `` et ses enfants pour la mise à jour concernée. Elle indique à quel point vos enfants profitent de la mémorisation (plus précisément [`memo`](/reference/react/memo) et [`useMemo`](/reference/react/useMemo)). Idéalement, cette valeur devrait décroître de façon significative après le rendu initial car les enfants devront uniquement être re-rendu si leurs props spécifique changent. +* `baseDuration`: Le temps en milliseconde estimant la durée que prendrait un rendu complet de `` sans aucune optimisation. Elle est calculée en sommant la durée de chaque rendu des composants enfant. Cette valeur estime le pire scénario de rendu(c'est à dire le temps initial de rendu sans mémorisation). Comparez avec `actualDuration` afin de voir si la mémorisation fonctionne. * `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. @@ -129,4 +129,3 @@ 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. --- - From 40e8272728d3f23f7d0e33978a10a31dfb7d1214 Mon Sep 17 00:00:00 2001 From: Bastien Dumont Date: Mon, 1 May 2023 21:06:08 +0200 Subject: [PATCH 2/5] harmonize with components page --- src/content/reference/react/Profiler.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md index 6c920f72b..c64aa6abf 100644 --- a/src/content/reference/react/Profiler.md +++ b/src/content/reference/react/Profiler.md @@ -4,7 +4,7 @@ title: -`` vous permet de mesurer les performance de rendu d'un arbre React. +`` vous permet de mesurer dans votre code les performances de rendu d'un arbre React. ```js From 8d66a9b026526aa3531f9712a1bedf8db3f2d7d9 Mon Sep 17 00:00:00 2001 From: Bastien Dumont Date: Sun, 7 May 2023 13:20:16 +0200 Subject: [PATCH 3/5] cleanup --- src/content/reference/react/Profiler.md | 36 ++++++++++++------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md index c64aa6abf..010e2a02a 100644 --- a/src/content/reference/react/Profiler.md +++ b/src/content/reference/react/Profiler.md @@ -4,7 +4,7 @@ title: -`` vous permet de mesurer dans votre code les performances de rendu d'un arbre React. +`` vous permet de mesurer dans votre code les performances de rendu d’un arbre React. ```js @@ -33,7 +33,7 @@ Enrober un arbre de composant dans un `` afin de mesurer ses performan #### Props {/*props*/} * `id`: Une chaîne de caractère identifiant le composant que vous souhaitez mesurer. -* `onRender`: Une [fonction de rappel `onRender`](#onrender-callback) appelée à chaque nouveau rendu d'un composant situé l'arbre profilé. Elle reçoit les informations de rendu tel que le composant et la durée prise. +* `onRender`: Une [fonction de rappel `onRender`](#onrender-callback) appelée à chaque nouveau rendu d’un composant situé l’arbre profilé. Elle reçoit les informations de rendu tel que le composant et la durée prise.Ò #### Limitations {/*caveats*/} @@ -53,20 +53,20 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime #### Paramètres {/*onrender-parameters*/} -* `id`: La chaîne de caractère `id` utilisée en prop de l'arbre ``. Elle vous permet d'identifier quelles partie de l'arbre re-rendu en cas de co-existence de profiler. -* `phase`: `"mount"`, `"update"` ou `"nested-update"`. Ça vous permet de savoir si l'arbre a été monté pour la première fois ou re-monté à cause d'un changement dans les props, state ou hooks. -* `actualDuration`: La durée en millisecondes écoulée pendant le rendu de `` et ses enfants pour la mise à jour concernée. Elle indique à quel point vos enfants profitent de la mémorisation (plus précisément [`memo`](/reference/react/memo) et [`useMemo`](/reference/react/useMemo)). Idéalement, cette valeur devrait décroître de façon significative après le rendu initial car les enfants devront uniquement être re-rendu si leurs props spécifique changent. -* `baseDuration`: Le temps en milliseconde estimant la durée que prendrait un rendu complet de `` sans aucune optimisation. Elle est calculée en sommant la durée de chaque rendu des composants enfant. Cette valeur estime le pire scénario de rendu(c'est à dire le temps initial de rendu sans mémorisation). Comparez avec `actualDuration` afin de voir si la mémorisation fonctionne. -* `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 chaîne de caractère `id` utilisée en prop de l’arbre ``. Elle vous permet d’identifier quelles partie de l’arbre re-rendu en cas de co-existence de profiler. +* `phase`: `"mount"`, `"update"` ou `"nested-update"`. Ça vous permet de savoir si l’arbre a été monté pour la première fois ou re-monté à cause d’un changement dans les props, state ou hooks. +* `actualDuration`: La durée en millisecondes écoulée pendant le rendu de `` et de ses enfants pour la mise à jour concernée. Elle indique à quel point vos enfants profitent de la mémorisation (plus précisément [`memo`](/reference/react/memo) et [`useMemo`](/reference/react/useMemo)). Idéalement, cette valeur devrait décroître de façon significative après le rendu initial car les enfants devront uniquement être re-rendu si leurs props changent. +* `baseDuration`: Le durée en milliseconde estimant le temps que prendrait un rendu complet de `` sans aucune optimisation. Elle est calculée en sommant la durée de rendu des composants enfant. Cette valeur représente la durée maximale de rendu (c’est à dire le temps initial de rendu sans mémorisation). Comparez la avec `actualDuration` afin de voir si la mémorisation fonctionne. +* `startTime`: Un horodatage numérique de React datant le début de la mise à jour. +* `endTime`: Un horodatage numérique de React datant la fin de la mise à jour. Cette valeur est partagée entre les profileurs, leur permettant de les grouper si souhaité. --- -## Usage {/*usage*/} +## Utilisation {/*usage*/} -### Measuring rendering performance programmatically {/*measuring-rendering-performance-programmatically*/} +### Mesurer les performances de votre code {/*measuring-rendering-performance-programmatically*/} -Wrap the `` component around a React tree to measure its rendering performance. +Enrober un arbre React avec `` pour mesurer ses performance 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ère `id` et une fonction de rappel `onRender`que React appelle à chaque mise à jour de l’arbre. -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 une certaine lourdeur, il est ainsi **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 de façon unitaires. Si vous cherchez à mesurer vos performances globales, essayez l’onglet profiler avec les [outils de développement](/learn/react-developer-tools). Des fonctionnalités similaires sont disponibles avec l’extension web. --- -### 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 to measure different parts of your 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,6 +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 nécessaire. Chaque utilisation ajoute de la charge CPU et de l’utilisation mémoire à une application. --- From 5d6bdf6749b9382eb54e51b4d990ac9390f6b6fe Mon Sep 17 00:00:00 2001 From: Bastien Dumont <32489032+bastiendmt@users.noreply.github.com> Date: Sun, 14 May 2023 17:12:31 +0200 Subject: [PATCH 4/5] Apply suggestions from code review Co-authored-by: Christophe Porteneuve --- src/content/reference/react/Profiler.md | 40 ++++++++++++------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md index 010e2a02a..0f97b6d36 100644 --- a/src/content/reference/react/Profiler.md +++ b/src/content/reference/react/Profiler.md @@ -22,7 +22,7 @@ title: ### `` {/*profiler*/} -Enrober un arbre de composant dans un `` afin de mesurer ses performances de rendu. +Enrobez un arbre de composants dans un `` afin de mesurer ses performances de rendu. ```js @@ -32,41 +32,41 @@ Enrober un arbre de composant dans un `` afin de mesurer ses performan #### Props {/*props*/} -* `id`: Une chaîne de caractère identifiant le composant que vous souhaitez mesurer. -* `onRender`: Une [fonction de rappel `onRender`](#onrender-callback) appelée à chaque nouveau rendu d’un composant situé l’arbre profilé. Elle reçoit les informations de rendu tel que le composant et la durée prise.Ò +* `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. #### Limitations {/*caveats*/} -* Le profilage une certaine lourdeur, il est ainsi **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). +* 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` fonction de rappel {/*onrender-callback*/} +### Fonction de rappel `onRender` {/*onrender-callback*/} -React va appeler votre fonction de rappel `onRender` avec les informations de rendu. +React appellera votre fonction de rappel `onRender` avec des informations de rendu. ```js function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) { - // Agréger ou afficher la durée de rendu... + // Agréger ou afficher les durées de rendu... } ``` #### Paramètres {/*onrender-parameters*/} -* `id`: La chaîne de caractère `id` utilisée en prop de l’arbre ``. Elle vous permet d’identifier quelles partie de l’arbre re-rendu en cas de co-existence de profiler. -* `phase`: `"mount"`, `"update"` ou `"nested-update"`. Ça vous permet de savoir si l’arbre a été monté pour la première fois ou re-monté à cause d’un changement dans les props, state ou hooks. -* `actualDuration`: La durée en millisecondes écoulée pendant le rendu de `` et de ses enfants pour la mise à jour concernée. Elle indique à quel point vos enfants profitent de la mémorisation (plus précisément [`memo`](/reference/react/memo) et [`useMemo`](/reference/react/useMemo)). Idéalement, cette valeur devrait décroître de façon significative après le rendu initial car les enfants devront uniquement être re-rendu si leurs props changent. -* `baseDuration`: Le durée en milliseconde estimant le temps que prendrait un rendu complet de `` sans aucune optimisation. Elle est calculée en sommant la durée de rendu des composants enfant. Cette valeur représente la durée maximale de rendu (c’est à dire le temps initial de rendu sans mémorisation). Comparez la avec `actualDuration` afin de voir si la mémorisation fonctionne. -* `startTime`: Un horodatage numérique de React datant le début de la mise à jour. -* `endTime`: Un horodatage numérique de React datant la fin de la mise à jour. Cette valeur est partagée entre les profileurs, leur permettant de les grouper si souhaité. +* `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. --- ## Utilisation {/*usage*/} -### Mesurer les performances de votre code {/*measuring-rendering-performance-programmatically*/} +### Mesurer les performances depuis votre code {/*measuring-rendering-performance-programmatically*/} -Enrober un arbre React avec `` pour mesurer ses performance des rendu. +Enrobez un arbre React avec `` pour mesurer ses performances des rendu. ```js {2,4} @@ -77,17 +77,17 @@ Enrober un arbre React avec `` pour mesurer ses performance des rendu. ``` -Deux props sont nécessaires : une chaîne de caractère `id` et une fonction de rappel `onRender`que React appelle à chaque mise à jour de l’arbre. +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”). -Le profilage une certaine lourdeur, il est ainsi **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). +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). -`` vous permet de mesurer les performances de façon unitaires. Si vous cherchez à mesurer vos performances globales, essayez l’onglet profiler avec les [outils de développement](/learn/react-developer-tools). Des fonctionnalités similaires sont disponibles avec l’extension web. +`` 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. @@ -95,7 +95,7 @@ Le profilage une certaine lourdeur, il est ainsi **désactivé par défaut dans ### Mesurer différentes parties de votre application {/*measuring-different-parts-of-the-application*/} -Vous pouvez utiliser plusieurs composants `` pour mesurer différentes parties de votre application to measure different parts of your application : +Vous pouvez utiliser plusieurs composants `` pour mesurer différentes parties de votre application : ```js {5,7} @@ -126,6 +126,6 @@ Vous pouvez aussi imbriquer des `` : ``` -Bien que le composant `` soit léger, il ne devrait être utilisé que lorsque nécessaire. Chaque utilisation ajoute de la charge CPU et de l’utilisation mémoire à une 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. --- From bc539dc90aea7857e08c1f8037be872a0f4f0cc7 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Mon, 15 May 2023 08:45:28 +0100 Subject: [PATCH 5/5] copy(Profiler): final review pass --- src/content/reference/react/Profiler.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md index 0f97b6d36..a6fa439fe 100644 --- a/src/content/reference/react/Profiler.md +++ b/src/content/reference/react/Profiler.md @@ -4,7 +4,7 @@ title: -`` vous permet de mesurer dans votre code les performances de rendu d’un arbre React. +`` vous permet de mesurer au sein de votre code les performances de rendu d’un arbre de composants React. ```js @@ -54,7 +54,7 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime #### Paramètres {/*onrender-parameters*/} * `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. +* `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.