From a00239bb84221b1d900ccd196d6f561e0810a031 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Mon, 14 Sep 2026 22:49:10 +0300 Subject: [PATCH 1/2] translate(reference): Profiler Signed-off-by: Alessandro De Blasis --- src/content/reference/react/Profiler.md | 56 ++++++++++++++----------- 1 file changed, 31 insertions(+), 25 deletions(-) diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md index e70e29963..20f2105a3 100644 --- a/src/content/reference/react/Profiler.md +++ b/src/content/reference/react/Profiler.md @@ -1,10 +1,17 @@ --- title: +translationStatus: ai-draft --- + + +Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un'ulteriore revisione da parte della community sarebbe comunque utile. [Migliora questa traduzione](https://github.com/reactjs/it.react.dev/edit/main/src/content/reference/react/Profiler.md). + + + -`` lets you measure rendering performance of a React tree programmatically. +`` ti permette di misurare programmaticamente le prestazioni di renderizzazione di un albero React. ```js @@ -22,7 +29,7 @@ title: ### `` {/*profiler*/} -Wrap a component tree in a `` to measure its rendering performance. +Avvolgi un albero di componenti in un `` per misurare le prestazioni di renderizzazione. ```js @@ -32,41 +39,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`: Una stringa che identifica la parte dell'interfaccia utente che stai misurando. +* `onRender`: Una [`callback onRender`](#onrender-callback) che React chiama ogni volta che i componenti nell'albero profilato si aggiornano. Riceve informazioni su cosa è stato renderizzato e quanto tempo ha richiesto. #### Caveats {/*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.](/reference/dev-tools/react-performance-tracks#using-profiling-builds) +* Il profiling aggiunge un overhead aggiuntivo, quindi **è disabilitato di default nella build di produzione.** Per attivare il profiling in produzione, devi abilitare una [build di produzione speciale con il profiling attivato.](/reference/dev-tools/react-performance-tracks#using-profiling-builds) --- ### `onRender` callback {/*onrender-callback*/} -React will call your `onRender` callback with information about what was rendered. +React chiamerà la tua callback `onRender` con informazioni su cosa è stato renderizzato. ```js function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) { - // Aggregate or log render timings... + // Aggrega o registra i tempi di renderizzazione... } ``` #### Parameters {/*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. -* `commitTime`: 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 stringa della prop `id` dell'albero `` appena sottoposto a commit. Ti permette di identificare quale parte dell'albero ha effettuato il commit se usi più profiler. +* `phase`: `"mount"`, `"update"` o `"nested-update"`. Ti indica se l'albero è stato montato per la prima volta o renderizzato di nuovo a causa di un cambiamento di props, state o Hooks. +* `actualDuration`: Il numero di millisecondi impiegati per renderizzare il `` e i suoi discendenti per l'aggiornamento corrente. Indica quanto bene il sottoalbero sfrutta la memorizzazione (ad esempio [`memo`](/reference/react/memo) e [`useMemo`](/reference/react/useMemo)). Idealmente questo valore dovrebbe diminuire significativamente dopo il montaggio iniziale, poiché molti discendenti dovranno renderizzare di nuovo solo se cambiano le loro props specifiche. +* `baseDuration`: Il numero di millisecondi stimati per renderizzare di nuovo l'intero sottoalbero `` senza ottimizzazioni. Viene calcolato sommando le durate di renderizzazione più recenti di ogni componente nell'albero. Questo valore stima il costo nel caso peggiore di renderizzazione (ad esempio il montaggio iniziale o un albero senza memorizzazione). Confronta `actualDuration` con questo valore per verificare se la memorizzazione funziona. +* `startTime`: Un timestamp numerico relativo al momento in cui React ha iniziato a renderizzare l'aggiornamento corrente. +* `commitTime`: Un timestamp numerico relativo al momento in cui React ha effettuato il commit dell'aggiornamento corrente. Questo valore è condiviso tra tutti i profiler in un commit, permettendone il raggruppamento se necessario. --- ## Usage {/*usage*/} -### Measuring rendering performance programmatically {/*measuring-rendering-performance-programmatically*/} +### Misurare programmaticamente le prestazioni di renderizzazione {/*measuring-rendering-performance-programmatically*/} -Wrap the `` component around a React tree to measure its rendering performance. +Avvolgi il componente `` attorno a un albero React per misurare le prestazioni di renderizzazione. ```js {2,4} @@ -77,28 +84,28 @@ 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. +Richiede due props: un `id` (stringa) e una callback `onRender` (funzione) che React chiama ogni volta che un componente nell'albero effettua il commit di un aggiornamento. -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.](/reference/dev-tools/react-performance-tracks#using-profiling-builds) +Il profiling aggiunge un overhead aggiuntivo, quindi **è disabilitato di default nella build di produzione.** Per attivare il profiling in produzione, devi abilitare una [build di produzione speciale con il profiling attivato.](/reference/dev-tools/react-performance-tracks#using-profiling-builds) -`` 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. +`` ti permette di raccogliere misurazioni programmaticamente. Se cerchi un profiler interattivo, prova la scheda _Profiler_ in [React Developer Tools](/learn/react-developer-tools). Espone funzionalità simili come estensione del browser. -Components wrapped in `` will also be marked in the [Component tracks](/reference/dev-tools/react-performance-tracks#components) of React Performance tracks even in profiling builds. -In development builds, all components are marked in the Components track regardless of whether they're wrapped in ``. +I componenti avvolti in `` saranno anche contrassegnati nella [traccia Components](/reference/dev-tools/react-performance-tracks#components) di React Performance tracks anche nelle build con profiling. +Nelle build di development, tutti i componenti sono contrassegnati nella traccia Components indipendentemente dal fatto che siano avvolti in ``. --- -### Measuring different parts of the application {/*measuring-different-parts-of-the-application*/} +### Misurare diverse parti dell'applicazione {/*measuring-different-parts-of-the-application*/} -You can use multiple `` components to measure different parts of your application: +Puoi usare più componenti `` per misurare diverse parti della tua applicazione: ```js {5,7} @@ -111,7 +118,7 @@ You can use multiple `` components to measure different parts of your ``` -You can also nest `` components: +Puoi anche annidare componenti ``: ```js {5,7,9,12} @@ -129,7 +136,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. +Sebbene `` sia un componente leggero, dovrebbe essere usato solo quando necessario. Ogni utilizzo aggiunge un overhead di CPU e memoria all'applicazione. --- - From b543ea301394bcffe1c84d7ce46b121dcebf5fde Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Mon, 14 Sep 2026 22:53:36 +0300 Subject: [PATCH 2/2] chore: refresh PR #655 after stack rebuild Signed-off-by: Alessandro De Blasis Co-authored-by: Cursor