diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md index 16e8d9e60..0f79fa743 100644 --- a/src/content/reference/react/StrictMode.md +++ b/src/content/reference/react/StrictMode.md @@ -1,11 +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/StrictMode.md). + + -`` lets you find common bugs in your components early during development. +`` ti permette di trovare bug comuni nei tuoi componenti in anticipo durante lo sviluppo. ```js @@ -24,7 +30,7 @@ title: ### `` {/*strictmode*/} -Use `StrictMode` to enable additional development behaviors and warnings for the component tree inside: +Usa `StrictMode` per abilitare comportamenti e warning aggiuntivi di sviluppo per l'albero di componenti al suo interno: ```js import { StrictMode } from 'react'; @@ -38,33 +44,33 @@ root.render( ); ``` -[See more examples below.](#usage) +[Vedi altri esempi sotto.](#usage) -Strict Mode enables the following development-only behaviors: +Strict Mode abilita i seguenti comportamenti solo di sviluppo: -- Your components will [re-render an extra time](#fixing-bugs-found-by-double-rendering-in-development) to find bugs caused by impure rendering. -- Your components will [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) to find bugs caused by missing Effect cleanup. -- Your components will [re-run refs callbacks an extra time](#fixing-bugs-found-by-re-running-ref-callbacks-in-development) to find bugs caused by missing ref cleanup. -- Your components will [be checked for usage of deprecated APIs.](#fixing-deprecation-warnings-enabled-by-strict-mode) +- I tuoi componenti [renderizzeranno di nuovo un'ulteriore volta](#fixing-bugs-found-by-double-rendering-in-development) per trovare bug causati da renderizzazione impura. +- I tuoi componenti [rieseguiranno gli Effetti un'ulteriore volta](#fixing-bugs-found-by-re-running-effects-in-development) per trovare bug causati da cleanup degli Effetti mancante. +- I tuoi componenti [rieseguiranno i callback ref un'ulteriore volta](#fixing-bugs-found-by-re-running-ref-callbacks-in-development) per trovare bug causati da cleanup dei ref mancante. +- I tuoi componenti [verranno controllati per l'uso di API deprecate.](#fixing-deprecation-warnings-enabled-by-strict-mode) #### Props {/*props*/} -`StrictMode` accepts no props. +`StrictMode` non accetta props. #### Caveats {/*caveats*/} -* There is no way to opt out of Strict Mode inside a tree wrapped in ``. This gives you confidence that all components inside `` are checked. If two teams working on a product disagree whether they find the checks valuable, they need to either reach consensus or move `` down in the tree. +* Non c'è modo di disattivare Strict Mode all'interno di un albero avvolto in ``. Questo ti dà la certezza che tutti i componenti dentro `` vengono controllati. Se due team che lavorano su un prodotto non concordano sul valore dei controlli, devono trovare un consenso o spostare `` più in basso nell'albero. --- ## Usage {/*usage*/} -### Enabling Strict Mode for entire app {/*enabling-strict-mode-for-entire-app*/} +### Abilitare Strict Mode per l'intera app {/*enabling-strict-mode-for-entire-app*/} -Strict Mode enables extra development-only checks for the entire component tree inside the `` component. These checks help you find common bugs in your components early in the development process. +Strict Mode abilita controlli aggiuntivi solo di sviluppo per l'intero albero di componenti dentro il componente ``. Questi controlli ti aiutano a trovare bug comuni nei tuoi componenti all'inizio del processo di sviluppo. -To enable Strict Mode for your entire app, wrap your root component with `` when you render it: +Per abilitare Strict Mode per l'intera app, avvolgi il componente root con `` quando lo renderizzi: ```js {6,8} import { StrictMode } from 'react'; @@ -78,28 +84,28 @@ root.render( ); ``` -We recommend wrapping your entire app in Strict Mode, especially for newly created apps. If you use a framework that calls [`createRoot`](/reference/react-dom/client/createRoot) for you, check its documentation for how to enable Strict Mode. +Ti consigliamo di avvolgere l'intera app in Strict Mode, soprattutto per le app appena create. Se usi un framework che chiama [`createRoot`](/reference/react-dom/client/createRoot) per te, controlla la sua documentazione per sapere come abilitare Strict Mode. -Although the Strict Mode checks **only run in development,** they help you find bugs that already exist in your code but can be tricky to reliably reproduce in production. Strict Mode lets you fix bugs before your users report them. +Sebbene i controlli di Strict Mode **vengano eseguiti solo in sviluppo,** ti aiutano a trovare bug già presenti nel tuo codice ma difficili da riprodurre in modo affidabile in produzione. Strict Mode ti permette di correggere i bug prima che i tuoi utenti li segnalino. -Strict Mode enables the following checks in development: +Strict Mode abilita i seguenti controlli in sviluppo: -- Your components will [re-render an extra time](#fixing-bugs-found-by-double-rendering-in-development) to find bugs caused by impure rendering. -- Your components will [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) to find bugs caused by missing Effect cleanup. -- Your components will [re-run ref callbacks an extra time](#fixing-bugs-found-by-re-running-ref-callbacks-in-development) to find bugs caused by missing ref cleanup. -- Your components will [be checked for usage of deprecated APIs.](#fixing-deprecation-warnings-enabled-by-strict-mode) +- I tuoi componenti [renderizzeranno di nuovo un'ulteriore volta](#fixing-bugs-found-by-double-rendering-in-development) per trovare bug causati da renderizzazione impura. +- I tuoi componenti [rieseguiranno gli Effetti un'ulteriore volta](#fixing-bugs-found-by-re-running-effects-in-development) per trovare bug causati da cleanup degli Effetti mancante. +- I tuoi componenti [rieseguiranno i callback ref un'ulteriore volta](#fixing-bugs-found-by-re-running-ref-callbacks-in-development) per trovare bug causati da cleanup dei ref mancante. +- I tuoi componenti [verranno controllati per l'uso di API deprecate.](#fixing-deprecation-warnings-enabled-by-strict-mode) -**All of these checks are development-only and do not impact the production build.** +**Tutti questi controlli sono solo di sviluppo e non influenzano il build di produzione.** --- -### Enabling Strict Mode for a part of the app {/*enabling-strict-mode-for-a-part-of-the-app*/} +### Abilitare Strict Mode per una parte dell'app {/*enabling-strict-mode-for-a-part-of-the-app*/} -You can also enable Strict Mode for any part of your application: +Puoi anche abilitare Strict Mode per qualsiasi parte della tua applicazione: ```js {7,12} import { StrictMode } from 'react'; @@ -120,31 +126,31 @@ function App() { } ``` -In this example, Strict Mode checks will not run against the `Header` and `Footer` components. However, they will run on `Sidebar` and `Content`, as well as all of the components inside them, no matter how deep. +In questo esempio, i controlli di Strict Mode non verranno eseguiti sui componenti `Header` e `Footer`. Tuttavia, verranno eseguiti su `Sidebar` e `Content`, così come su tutti i componenti al loro interno, indipendentemente dalla profondità. -When `StrictMode` is enabled for a part of the app, React will only enable behaviors that are possible in production. For example, if `` is not enabled at the root of the app, it will not [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) on initial mount, since this would cause child effects to double fire without the parent effects, which cannot happen in production. +Quando `StrictMode` è abilitato per una parte dell'app, React abiliterà solo comportamenti possibili in produzione. Per esempio, se `` non è abilitato alla root dell'app, non [rieseguirà gli Effetti un'ulteriore volta](#fixing-bugs-found-by-re-running-effects-in-development) al mount iniziale, poiché ciò causerebbe il doppio avvio degli effetti figli senza gli effetti genitore, cosa che non può accadere in produzione. --- -### Fixing bugs found by double rendering in development {/*fixing-bugs-found-by-double-rendering-in-development*/} +### Correggere bug trovati dalla doppia renderizzazione in sviluppo {/*fixing-bugs-found-by-double-rendering-in-development*/} -[React assumes that every component you write is a pure function.](/learn/keeping-components-pure) This means that React components you write must always return the same JSX given the same inputs (props, state, and context). +[React assume che ogni componente che scrivi sia una funzione pura.](/learn/keeping-components-pure) Questo significa che i componenti React che scrivi devono sempre restituire lo stesso JSX dati gli stessi input (props, state e context). -Components breaking this rule behave unpredictably and cause bugs. To help you find accidentally impure code, Strict Mode calls some of your functions (only the ones that should be pure) **twice in development.** This includes: +I componenti che violano questa regola si comportano in modo imprevedibile e causano bug. Per aiutarti a trovare codice accidentalmente impuro, Strict Mode chiama alcune delle tue funzioni (solo quelle che dovrebbero essere pure) **due volte in sviluppo.** Questo include: -- Your component function body (only top-level logic, so this doesn't include code inside event handlers) -- Functions that you pass to [`useState`](/reference/react/useState), [`set` functions](/reference/react/useState#setstate), [`useMemo`](/reference/react/useMemo), or [`useReducer`](/reference/react/useReducer) -- Some class component methods like [`constructor`](/reference/react/Component#constructor), [`render`](/reference/react/Component#render), [`shouldComponentUpdate`](/reference/react/Component#shouldcomponentupdate) ([see the whole list](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects)) +- Il corpo della funzione del componente (solo la logica di top level, quindi non include codice dentro i gestori di eventi) +- Funzioni che passi a [`useState`](/reference/react/useState), [funzioni `set`](/reference/react/useState#setstate), [`useMemo`](/reference/react/useMemo) o [`useReducer`](/reference/react/useReducer) +- Alcuni metodi di componenti classe come [`constructor`](/reference/react/Component#constructor), [`render`](/reference/react/Component#render), [`shouldComponentUpdate`](/reference/react/Component#shouldcomponentupdate) ([vedi l'elenco completo](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects)) -If a function is pure, running it twice does not change its behavior because a pure function produces the same result every time. However, if a function is impure (for example, it mutates the data it receives), running it twice tends to be noticeable (that's what makes it impure!) This helps you spot and fix the bug early. +Se una funzione è pura, eseguirla due volte non cambia il suo comportamento perché una funzione pura produce lo stesso risultato ogni volta. Tuttavia, se una funzione è impura (per esempio, muta i dati che riceve), eseguirla due volte tende a essere evidente (ed è questo che la rende impura!) Questo ti aiuta a individuare e correggere il bug in anticipo. -**Here is an example to illustrate how double rendering in Strict Mode helps you find bugs early.** +**Ecco un esempio per illustrare come la doppia renderizzazione in Strict Mode ti aiuta a trovare bug in anticipo.** -This `StoryTray` component takes an array of `stories` and adds one last "Create Story" item at the end: +Questo componente `StoryTray` accetta un array di `stories` e aggiunge un ultimo elemento "Create Story" alla fine: @@ -222,9 +228,9 @@ li { -There is a mistake in the code above. However, it is easy to miss because the initial output appears correct. +C'è un errore nel codice sopra. Tuttavia, è facile non accorgersene perché l'output iniziale appare corretto. -This mistake will become more noticeable if the `StoryTray` component re-renders multiple times. For example, let's make the `StoryTray` re-render with a different background color whenever you hover over it: +Questo errore diventerà più evidente se il componente `StoryTray` viene renderizzato di nuovo più volte. Per esempio, facciamo in modo che `StoryTray` venga renderizzato di nuovo con un colore di sfondo diverso ogni volta che ci passi sopra con il mouse: @@ -311,20 +317,20 @@ li { -Notice how every time you hover over the `StoryTray` component, "Create Story" gets added to the list again. The intention of the code was to add it once at the end. But `StoryTray` directly modifies the `stories` array from the props. Every time `StoryTray` renders, it adds "Create Story" again at the end of the same array. In other words, `StoryTray` is not a pure function--running it multiple times produces different results. +Nota come ogni volta che passi sopra il componente `StoryTray` con il mouse, "Create Story" viene aggiunto di nuovo alla lista. L'intenzione del codice era aggiungerlo una sola volta alla fine. Ma `StoryTray` modifica direttamente l'array `stories` dalle props. Ogni volta che `StoryTray` renderizza, aggiunge di nuovo "Create Story" alla fine dello stesso array. In altre parole, `StoryTray` non è una funzione pura — eseguirla più volte produce risultati diversi. -To fix this problem, you can make a copy of the array, and modify that copy instead of the original one: +Per correggere questo problema, puoi fare una copia dell'array e modificare quella copia invece dell'originale: ```js {2} export default function StoryTray({ stories }) { - const items = stories.slice(); // Clone the array - // ✅ Good: Pushing into a new array + const items = stories.slice(); // Clona l'array + // ✅ Bene: push in un nuovo array items.push({ id: 'create', label: 'Create Story' }); ``` -This would [make the `StoryTray` function pure.](/learn/keeping-components-pure) Each time it is called, it would only modify a new copy of the array, and would not affect any external objects or variables. This solves the bug, but you had to make the component re-render more often before it became obvious that something is wrong with its behavior. +Questo [renderebbe la funzione `StoryTray` pura.](/learn/keeping-components-pure) Ogni volta che viene chiamata, modificherebbe solo una nuova copia dell'array e non influenzerebbe oggetti o variabili esterni. Questo risolve il bug, ma dovevi far renderizzare di nuovo il componente più spesso prima che diventasse evidente che c'era qualcosa di sbagliato nel suo comportamento. -**In the original example, the bug wasn't obvious. Now let's wrap the original (buggy) code in ``:** +**Nell'esempio originale, il bug non era evidente. Ora avvolgiamo il codice originale (buggato) in ``:** @@ -407,7 +413,7 @@ li { -**Strict Mode *always* calls your rendering function twice, so you can see the mistake right away** ("Create Story" appears twice). This lets you notice such mistakes early in the process. When you fix your component to render in Strict Mode, you *also* fix many possible future production bugs like the hover functionality from before: +**Strict Mode chiama *sempre* la tua funzione di renderizzazione due volte, così puoi vedere l'errore subito** ("Create Story" appare due volte). Questo ti permette di notare tali errori all'inizio del processo. Quando correggi il componente per renderizzare in Strict Mode, *correggi anche* molti possibili bug futuri in produzione come la funzionalità hover di prima: @@ -456,7 +462,7 @@ import { useState } from 'react'; export default function StoryTray({ stories }) { const [isHover, setIsHover] = useState(false); - const items = stories.slice(); // Clone the array + const items = stories.slice(); // Clona l'array items.push({ id: 'create', label: 'Create Story' }); return (
    -Without Strict Mode, it was easy to miss the bug until you added more re-renders. Strict Mode made the same bug appear right away. Strict Mode helps you find bugs before you push them to your team and to your users. +Senza Strict Mode, era facile non accorgersi del bug finché non aggiungevi più ri-renderizzazioni. Strict Mode ha fatto apparire lo stesso bug subito. Strict Mode ti aiuta a trovare bug prima di pusharli al tuo team e ai tuoi utenti. -[Read more about keeping components pure.](/learn/keeping-components-pure) +[Leggi di più su come mantenere i componenti puri.](/learn/keeping-components-pure) -If you have [React DevTools](/learn/react-developer-tools) installed, any `console.log` calls during the second render call will appear slightly dimmed. React DevTools also offers a setting (off by default) to suppress them completely. +Se hai installato [React DevTools](/learn/react-developer-tools), le chiamate `console.log` durante la seconda renderizzazione appariranno leggermente attenuate. React DevTools offre anche un'impostazione (disattivata di default) per sopprimerle completamente. --- -### Fixing bugs found by re-running Effects in development {/*fixing-bugs-found-by-re-running-effects-in-development*/} +### Correggere bug trovati dalla riesecuzione degli Effetti in sviluppo {/*fixing-bugs-found-by-re-running-effects-in-development*/} -Strict Mode can also help find bugs in [Effects.](/learn/synchronizing-with-effects) +Strict Mode può anche aiutare a trovare bug negli [Effetti.](/learn/synchronizing-with-effects) -Every Effect has some setup code and may have some cleanup code. Normally, React calls setup when the component *mounts* (is added to the screen) and calls cleanup when the component *unmounts* (is removed from the screen). React then calls cleanup and setup again if its dependencies changed since the last render. +Ogni Effetto ha del codice di setup e può avere del codice di cleanup. Normalmente, React chiama il setup quando il componente viene *montato* (viene aggiunto allo schermo) e chiama il cleanup quando il componente viene *smontato* (viene rimosso dallo schermo). React chiama poi di nuovo cleanup e setup se le dipendenze sono cambiate dall'ultima renderizzazione. -When Strict Mode is on, React will also run **one extra setup+cleanup cycle in development for every Effect.** This may feel surprising, but it helps reveal subtle bugs that are hard to catch manually. +Quando Strict Mode è attivo, React eseguirà anche **un ciclo setup+cleanup aggiuntivo in sviluppo per ogni Effetto.** Questo può sembrare sorprendente, ma aiuta a rivelare bug sottili difficili da individuare manualmente. -**Here is an example to illustrate how re-running Effects in Strict Mode helps you find bugs early.** +**Ecco un esempio per illustrare come la riesecuzione degli Effetti in Strict Mode ti aiuta a trovare bug in anticipo.** -Consider this example that connects a component to a chat: +Considera questo esempio che collega un componente a una chat: @@ -547,7 +553,7 @@ export default function ChatRoom() { const connection = createConnection(serverUrl, roomId); connection.connect(); }, []); - return

    Welcome to the {roomId} room!

    ; + return

    Benvenuto nella stanza {roomId}!

    ; } ``` @@ -555,7 +561,7 @@ export default function ChatRoom() { let connections = 0; export function createConnection(serverUrl, roomId) { - // A real implementation would actually connect to the server + // Un'implementazione reale si connetterebbe effettivamente al server return { connect() { console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...'); @@ -578,9 +584,9 @@ button { margin-left: 10px; }     -There is an issue with this code, but it might not be immediately clear. +C'è un problema con questo codice, ma potrebbe non essere immediatamente evidente. -To make the issue more obvious, let's implement a feature. In the example below, `roomId` is not hardcoded. Instead, the user can select the `roomId` that they want to connect to from a dropdown. Click "Open chat" and then select different chat rooms one by one. Keep track of the number of active connections in the console: +Per rendere il problema più ovvio, implementiamo una funzionalità. Nell'esempio sotto, `roomId` non è hardcoded. Invece, l'utente può selezionare il `roomId` a cui connettersi da un menu a tendina. Clicca "Apri chat" e poi seleziona diverse stanze di chat una alla volta. Tieni traccia del numero di connessioni attive nella console: @@ -606,7 +612,7 @@ function ChatRoom({ roomId }) { connection.connect(); }, [roomId]); - return

    Welcome to the {roomId} room!

    ; + return

    Benvenuto nella stanza {roomId}!

    ; } export default function App() { @@ -615,7 +621,7 @@ export default function App() { return ( <> {show &&
    } {show && } @@ -639,7 +645,7 @@ export default function App() { let connections = 0; export function createConnection(serverUrl, roomId) { - // A real implementation would actually connect to the server + // Un'implementazione reale si connetterebbe effettivamente al server return { connect() { console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...'); @@ -662,7 +668,7 @@ button { margin-left: 10px; }     -You'll notice that the number of open connections always keeps growing. In a real app, this would cause performance and network problems. The issue is that [your Effect is missing a cleanup function:](/learn/synchronizing-with-effects#step-3-add-cleanup-if-needed) +Noterai che il numero di connessioni aperte continua a crescere. In un'app reale, questo causerebbe problemi di prestazioni e di rete. Il problema è che [al tuo Effetto manca una funzione di cleanup:](/learn/synchronizing-with-effects#step-3-add-cleanup-if-needed) ```js {4} useEffect(() => { @@ -672,9 +678,9 @@ You'll notice that the number of open connections always keeps growing. In a rea }, [roomId]); ``` -Now that your Effect "cleans up" after itself and destroys the outdated connections, the leak is solved. However, notice that the problem did not become visible until you've added more features (the select box). +Ora che il tuo Effetto fa "cleanup" dopo sé stesso e distrugge le connessioni obsolete, la perdita è risolta. Tuttavia, nota che il problema non è diventato visibile finché non hai aggiunto altre funzionalità (il menu a tendina). -**In the original example, the bug wasn't obvious. Now let's wrap the original (buggy) code in ``:** +**Nell'esempio originale, il bug non era evidente. Ora avvolgiamo il codice originale (buggato) in ``:** @@ -705,7 +711,7 @@ export default function ChatRoom() { const connection = createConnection(serverUrl, roomId); connection.connect(); }, []); - return

    Welcome to the {roomId} room!

    ; + return

    Benvenuto nella stanza {roomId}!

    ; } ``` @@ -713,7 +719,7 @@ export default function ChatRoom() { let connections = 0; export function createConnection(serverUrl, roomId) { - // A real implementation would actually connect to the server + // Un'implementazione reale si connetterebbe effettivamente al server return { connect() { console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...'); @@ -736,9 +742,9 @@ button { margin-left: 10px; }     -**With Strict Mode, you immediately see that there is a problem** (the number of active connections jumps to 2). Strict Mode runs an extra setup+cleanup cycle for every Effect. This Effect has no cleanup logic, so it creates an extra connection but doesn't destroy it. This is a hint that you're missing a cleanup function. +**Con Strict Mode, vedi subito che c'è un problema** (il numero di connessioni attive salta a 2). Strict Mode esegue un ciclo setup+cleanup aggiuntivo per ogni Effetto. Questo Effetto non ha logica di cleanup, quindi crea una connessione aggiuntiva ma non la distrugge. Questo è un indizio che ti manca una funzione di cleanup. -Strict Mode lets you notice such mistakes early in the process. When you fix your Effect by adding a cleanup function in Strict Mode, you *also* fix many possible future production bugs like the select box from before: +Strict Mode ti permette di notare tali errori all'inizio del processo. Quando correggi il tuo Effetto aggiungendo una funzione di cleanup in Strict Mode, *correggi anche* molti possibili bug futuri in produzione come il menu a tendina di prima: @@ -770,7 +776,7 @@ function ChatRoom({ roomId }) { return () => connection.disconnect(); }, [roomId]); - return

    Welcome to the {roomId} room!

    ; + return

    Benvenuto nella stanza {roomId}!

    ; } export default function App() { @@ -779,7 +785,7 @@ export default function App() { return ( <> {show &&
    } {show && } @@ -803,7 +809,7 @@ export default function App() { let connections = 0; export function createConnection(serverUrl, roomId) { - // A real implementation would actually connect to the server + // Un'implementazione reale si connetterebbe effettivamente al server return { connect() { console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...'); @@ -826,22 +832,22 @@ button { margin-left: 10px; }     -Notice how the active connection count in the console doesn't keep growing anymore. +Nota come il conteggio delle connessioni attive nella console non continua più a crescere. -Without Strict Mode, it was easy to miss that your Effect needed cleanup. By running *setup → cleanup → setup* instead of *setup* for your Effect in development, Strict Mode made the missing cleanup logic more noticeable. +Senza Strict Mode, era facile non accorgersi che il tuo Effetto necessitava di cleanup. Eseguendo *setup → cleanup → setup* invece di *setup* per il tuo Effetto in sviluppo, Strict Mode ha reso più evidente la logica di cleanup mancante. -[Read more about implementing Effect cleanup.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development) +[Leggi di più sull'implementazione del cleanup degli Effetti.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development) --- -### Fixing bugs found by re-running ref callbacks in development {/*fixing-bugs-found-by-re-running-ref-callbacks-in-development*/} +### Correggere bug trovati dalla riesecuzione dei callback ref in sviluppo {/*fixing-bugs-found-by-re-running-ref-callbacks-in-development*/} -Strict Mode can also help find bugs in [callbacks refs.](/learn/manipulating-the-dom-with-refs) +Strict Mode può anche aiutare a trovare bug nei [callback ref.](/learn/manipulating-the-dom-with-refs) -Every callback `ref` has some setup code and may have some cleanup code. Normally, React calls setup when the element is *created* (is added to the DOM) and calls cleanup when the element is *removed* (is removed from the DOM). +Ogni callback `ref` ha del codice di setup e può avere del codice di cleanup. Normalmente, React chiama il setup quando l'elemento viene *creato* (viene aggiunto al DOM) e chiama il cleanup quando l'elemento viene *rimosso* (viene rimosso dal DOM). -When Strict Mode is on, React will also run **one extra setup+cleanup cycle in development for every callback `ref`.** This may feel surprising, but it helps reveal subtle bugs that are hard to catch manually. +Quando Strict Mode è attivo, React eseguirà anche **un ciclo setup+cleanup aggiuntivo in sviluppo per ogni callback `ref`.** Questo può sembrare sorprendente, ma aiuta a rivelare bug sottili difficili da individuare manualmente. -Consider this example, which allows you to select an animal and then scroll to one of them. Notice when you switch from "Cats" to "Dogs", the console logs show that the number of animals in the list keeps growing, and the "Scroll to" buttons stop working: +Considera questo esempio, che ti permette di selezionare un gatto e poi scorrere fino a uno di essi. Nota che quando passi da Neo a Millie, i log della console mostrano che il numero di gatti nella lista continua a crescere e i pulsanti "Scorri a" smettono di funzionare: @@ -852,7 +858,7 @@ import './styles.css'; import App from './App'; const root = createRoot(document.getElementById("root")); -// ❌ Not using StrictMode. +// ❌ StrictMode non attivo. root.render(); ``` @@ -884,7 +890,7 @@ export default function CatFriends() {