From 2d07f248be07b4e3d704d3313398f88581255f84 Mon Sep 17 00:00:00 2001
From: Alessandro De Blasis <alex@deblasis.net>
Date: Tue, 15 Sep 2026 12:05:12 +0300
Subject: [PATCH 1/2] translate(learn): preserving-and-resetting-state

Signed-off-by: Alessandro De Blasis <alex@deblasis.net>
---
 .../learn/preserving-and-resetting-state.md   | 365 +++++++++---------
 src/sidebarLearn.json                         |   2 +-
 2 files changed, 187 insertions(+), 180 deletions(-)

diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index 685f63ef4..b42463995 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -1,28 +1,35 @@
 ---
-title: Preserving and Resetting State
+title: Preservare e Reimpostare lo State
+translationStatus: ai-draft
 ---
 
+<Note>
+
+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/learn/preserving-and-resetting-state.md).
+
+</Note>
+
 <Intro>
 
-State is isolated between components. React keeps track of which state belongs to which component based on their place in the UI tree. You can control when to preserve state and when to reset it between re-renders.
+Lo state è isolato tra i componenti. React tiene traccia di quale state appartiene a quale componente in base alla sua posizione nell'albero dell'UI. Puoi controllare quando preservare lo state e quando reimpostarlo tra le ri-renderizzazioni.
 
 </Intro>
 
 <YouWillLearn>
 
-* When React chooses to preserve or reset the state
-* How to force React to reset component's state
-* How keys and types affect whether the state is preserved
+* Quando React sceglie di preservare o reimpostare lo state
+* Come forzare React a reimpostare lo state di un componente
+* Come le key e i tipi influenzano se lo state viene preservato
 
 </YouWillLearn>
 
-## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/}
+## Lo state è legato a una posizione nell'albero di renderizzazione {/*state-is-tied-to-a-position-in-the-tree*/}
 
-React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
+React costruisce [alberi di renderizzazione](/learn/understanding-your-ui-as-a-tree#the-render-tree) per la struttura dei componenti nella tua UI.
 
-When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the render tree.
+Quando dai state a un componente, potresti pensare che lo state "viva" dentro il componente. Ma lo state è in realtà conservato dentro React. React associa ogni pezzo di state che conserva al componente corretto in base a dove quel componente si trova nell'albero di renderizzazione.
 
-Here, there is only one `<Counter />` JSX tag, but it's rendered at two different positions:
+Qui c'è un solo tag JSX `<Counter />`, ma viene renderizzato in due posizioni diverse:
 
 <Sandpack>
 
@@ -56,7 +63,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Aggiungi uno
       </button>
     </div>
   );
@@ -86,23 +93,23 @@ label {
 
 </Sandpack>
 
-Here's how these look as a tree:
+Ecco come appaiono come albero:
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_tree" height={248} width={395} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. Each of the children are labeled 'Counter' and both contain a state bubble labeled 'count' with value 0.">
+<Diagram name="preserving_state_tree" height={248} width={395} alt="Diagramma di un albero di componenti React. Il nodo radice è etichettato 'div' e ha due figli. Ciascuno dei figli è etichettato 'Counter' e entrambi contengono una bolla di state etichettata 'count' con valore 0.">
 
-React tree
+Albero React
 
 </Diagram>
 
 </DiagramGroup>
 
-**These are two separate counters because each is rendered at its own position in the tree.** You don't usually have to think about these positions to use React, but it can be useful to understand how it works.
+**Questi sono due contatori separati perché ciascuno è renderizzato nella propria posizione nell'albero.** Di solito non devi pensare a queste posizioni per usare React, ma può essere utile capire come funziona.
 
-In React, each component on the screen has fully isolated state. For example, if you render two `Counter` components side by side, each of them will get its own, independent, `score` and `hover` states.
+In React, ogni componente sullo schermo ha uno state completamente isolato. Ad esempio, se renderizzi due componenti `Counter` affiancati, ciascuno avrà i propri state `score` e `hover` indipendenti.
 
-Try clicking both counters and notice they don't affect each other:
+Prova a cliccare entrambi i contatori e nota che non si influenzano a vicenda:
 
 <Sandpack>
 
@@ -135,7 +142,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Aggiungi uno
       </button>
     </div>
   );
@@ -160,21 +167,21 @@ function Counter() {
 
 </Sandpack>
 
-As you can see, when one counter is updated, only the state for that component is updated:
+Come puoi vedere, quando un contatore viene aggiornato, viene aggiornato solo lo state di quel componente:
 
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_increment" height={248} width={441} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. The left child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is labeled 'Counter' and contains a state bubble labeled 'count' with value 1. The state bubble of the right child is highlighted in yellow to indicate its value has updated.">
+<Diagram name="preserving_state_increment" height={248} width={441} alt="Diagramma di un albero di componenti React. Il nodo radice è etichettato 'div' e ha due figli. Il figlio sinistro è etichettato 'Counter' e contiene una bolla di state etichettata 'count' con valore 0. Il figlio destro è etichettato 'Counter' e contiene una bolla di state etichettata 'count' con valore 1. La bolla di state del figlio destro è evidenziata in giallo per indicare che il suo valore è stato aggiornato.">
 
-Updating state
+Aggiornamento dello state
 
 </Diagram>
 
 </DiagramGroup>
 
 
-React will keep the state around for as long as you render the same component at the same position in the tree. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again:
+React manterrà lo state finché renderizzi lo stesso componente nella stessa posizione nell'albero. Per vederlo, incrementa entrambi i contatori, poi rimuovi il secondo componente deselezionando la checkbox "Renderizza il secondo contatore", e aggiungilo di nuovo selezionandola:
 
 <Sandpack>
 
@@ -195,7 +202,7 @@ export default function App() {
             setShowB(e.target.checked)
           }}
         />
-        Render the second counter
+        Renderizza il secondo contatore
       </label>
     </div>
   );
@@ -218,7 +225,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Aggiungi uno
       </button>
     </div>
   );
@@ -248,35 +255,35 @@ label {
 
 </Sandpack>
 
-Notice how the moment you stop rendering the second counter, its state disappears completely. That's because when React removes a component, it destroys its state.
+Nota come nel momento in cui smetti di renderizzare il secondo contatore, il suo state scompare completamente. Questo perché quando React rimuove un componente, ne distrugge lo state.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_remove_component" height={253} width={422} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. The left child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is missing, and in its place is a yellow 'poof' image, highlighting the component being deleted from the tree.">
+<Diagram name="preserving_state_remove_component" height={253} width={422} alt="Diagramma di un albero di componenti React. Il nodo radice è etichettato 'div' e ha due figli. Il figlio sinistro è etichettato 'Counter' e contiene una bolla di state etichettata 'count' con valore 0. Il figlio destro manca, e al suo posto c'è un'immagine gialla 'poof', che evidenzia il componente eliminato dall'albero.">
 
-Deleting a component
+Eliminazione di un componente
 
 </Diagram>
 
 </DiagramGroup>
 
-When you tick "Render the second counter", a second `Counter` and its state are initialized from scratch (`score = 0`) and added to the DOM.
+Quando selezioni "Renderizza il secondo contatore", un secondo `Counter` e il suo state vengono inizializzati da zero (`score = 0`) e aggiunti al DOM.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_add_component" height={258} width={500} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. The left child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The entire right child node is highlighted in yellow, indicating that it was just added to the tree.">
+<Diagram name="preserving_state_add_component" height={258} width={500} alt="Diagramma di un albero di componenti React. Il nodo radice è etichettato 'div' e ha due figli. Il figlio sinistro è etichettato 'Counter' e contiene una bolla di state etichettata 'count' con valore 0. Il figlio destro è etichettato 'Counter' e contiene una bolla di state etichettata 'count' con valore 0. L'intero nodo figlio destro è evidenziato in giallo, indicando che è stato appena aggiunto all'albero.">
 
-Adding a component
+Aggiunta di un componente
 
 </Diagram>
 
 </DiagramGroup>
 
-**React preserves a component's state for as long as it's being rendered at its position in the UI tree.** If it gets removed, or a different component gets rendered at the same position, React discards its state.
+**React preserva lo state di un componente finché viene renderizzato nella sua posizione nell'albero dell'UI.** Se viene rimosso, o se un componente diverso viene renderizzato nella stessa posizione, React scarta il suo state.
 
-## Same component at the same position preserves state {/*same-component-at-the-same-position-preserves-state*/}
+## Lo stesso componente nella stessa posizione preserva lo state {/*same-component-at-the-same-position-preserves-state*/}
 
-In this example, there are two different `<Counter />` tags:
+In questo esempio, ci sono due tag `<Counter />` diversi:
 
 <Sandpack>
 
@@ -300,7 +307,7 @@ export default function App() {
             setIsFancy(e.target.checked)
           }}
         />
-        Use fancy styling
+        Usa stile elegante
       </label>
     </div>
   );
@@ -326,7 +333,7 @@ function Counter({ isFancy }) {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Aggiungi uno
       </button>
     </div>
   );
@@ -361,24 +368,24 @@ label {
 
 </Sandpack>
 
-When you tick or clear the checkbox, the counter state does not get reset. Whether `isFancy` is `true` or `false`, you always have a `<Counter />` as the first child of the `div` returned from the root `App` component:
+Quando selezioni o deselezioni la checkbox, lo state del contatore non viene reimpostato. Che `isFancy` sia `true` o `false`, hai sempre un `<Counter />` come primo figlio del `div` restituito dal componente root `App`:
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_same_component" height={461} width={600} alt="Diagram with two sections separated by an arrow transitioning between them. Each section contains a layout of components with a parent labeled 'App' containing a state bubble labeled isFancy. This component has one child labeled 'div', which leads to a prop bubble containing isFancy (highlighted in purple) passed down to the only child. The last child is labeled 'Counter' and contains a state bubble with label 'count' and value 3 in both diagrams. In the left section of the diagram, nothing is highlighted and the isFancy parent state value is false. In the right section of the diagram, the isFancy parent state value has changed to true and it is highlighted in yellow, and so is the props bubble below, which has also changed its isFancy value to true.">
+<Diagram name="preserving_state_same_component" height={461} width={600} alt="Diagramma con due sezioni separate da una freccia di transizione. Ogni sezione contiene un layout di componenti con un genitore etichettato 'App' che contiene una bolla di state etichettata isFancy. Questo componente ha un figlio etichettato 'div', che porta a una bolla di props contenente isFancy (evidenziata in viola) passata all'unico figlio. L'ultimo figlio è etichettato 'Counter' e contiene una bolla di state con etichetta 'count' e valore 3 in entrambi i diagrammi. Nella sezione sinistra del diagramma, nulla è evidenziato e il valore dello state genitore isFancy è false. Nella sezione destra, il valore dello state genitore isFancy è cambiato in true ed è evidenziato in giallo, così come la bolla di props sotto, che ha anche cambiato il suo valore isFancy in true.">
 
-Updating the `App` state does not reset the `Counter` because `Counter` stays in the same position
+Aggiornare lo state di `App` non reimposta `Counter` perché `Counter` resta nella stessa posizione
 
 </Diagram>
 
 </DiagramGroup>
 
 
-It's the same component at the same position, so from React's perspective, it's the same counter.
+È lo stesso componente nella stessa posizione, quindi dal punto di vista di React, è lo stesso contatore.
 
 <Pitfall>
 
-Remember that **it's the position in the UI tree--not in the JSX markup--that matters to React!** This component has two `return` clauses with different `<Counter />` JSX tags inside and outside the `if`:
+Ricorda che **è la posizione nell'albero dell'UI — non nel markup JSX — che conta per React!** Questo componente ha due clausole `return` con tag JSX `<Counter />` diversi dentro e fuori l'`if`:
 
 <Sandpack>
 
@@ -399,7 +406,7 @@ export default function App() {
               setIsFancy(e.target.checked)
             }}
           />
-          Use fancy styling
+          Usa stile elegante
         </label>
       </div>
     );
@@ -415,7 +422,7 @@ export default function App() {
             setIsFancy(e.target.checked)
           }}
         />
-        Use fancy styling
+        Usa stile elegante
       </label>
     </div>
   );
@@ -441,7 +448,7 @@ function Counter({ isFancy }) {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Aggiungi uno
       </button>
     </div>
   );
@@ -476,15 +483,15 @@ label {
 
 </Sandpack>
 
-You might expect the state to reset when you tick checkbox, but it doesn't! This is because **both of these `<Counter />` tags are rendered at the same position.** React doesn't know where you place the conditions in your function. All it "sees" is the tree you return.
+Potresti aspettarti che lo state venga reimpostato quando selezioni la checkbox, ma non succede! Questo perché **entrambi questi tag `<Counter />` sono renderizzati nella stessa posizione.** React non sa dove posizioni le condizioni nella tua funzione. Tutto ciò che "vede" è l'albero che restituisci.
 
-In both cases, the `App` component returns a `<div>` with `<Counter />` as a first child. To React, these two counters have the same "address": the first child of the first child of the root. This is how React matches them up between the previous and next renders, regardless of how you structure your logic.
+In entrambi i casi, il componente `App` restituisce un `<div>` con `<Counter />` come primo figlio. Per React, questi due contatori hanno lo stesso "indirizzo": il primo figlio del primo figlio della root. È così che React li abbina tra la renderizzazione precedente e quella successiva, indipendentemente da come strutturi la tua logica.
 
 </Pitfall>
 
-## Different components at the same position reset state {/*different-components-at-the-same-position-reset-state*/}
+## Componenti diversi nella stessa posizione reimpostano lo state {/*different-components-at-the-same-position-reset-state*/}
 
-In this example, ticking the checkbox will replace `<Counter>` with a `<p>`:
+In questo esempio, selezionare la checkbox sostituirà `<Counter>` con un `<p>`:
 
 <Sandpack>
 
@@ -496,7 +503,7 @@ export default function App() {
   return (
     <div>
       {isPaused ? (
-        <p>See you later!</p>
+        <p>A presto!</p>
       ) : (
         <Counter />
       )}
@@ -508,7 +515,7 @@ export default function App() {
             setIsPaused(e.target.checked)
           }}
         />
-        Take a break
+        Fai una pausa
       </label>
     </div>
   );
@@ -531,7 +538,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Aggiungi uno
       </button>
     </div>
   );
@@ -561,13 +568,13 @@ label {
 
 </Sandpack>
 
-Here, you switch between _different_ component types at the same position. Initially, the first child of the `<div>` contained a `Counter`. But when you swapped in a `p`, React removed the `Counter` from the UI tree and destroyed its state.
+Qui, passi tra tipi di componente _diversi_ nella stessa posizione. Inizialmente, il primo figlio del `<div>` conteneva un `Counter`. Ma quando lo hai sostituito con un `p`, React ha rimosso il `Counter` dall'albero dell'UI e ha distrutto il suo state.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_pt1" height={290} width={753} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'Counter' containing a state bubble labeled 'count' with value 3. The middle section has the same 'div' parent, but the child component has now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'p', highlighted in yellow.">
+<Diagram name="preserving_state_diff_pt1" height={290} width={753} alt="Diagramma con tre sezioni, con una freccia di transizione tra ciascuna sezione. La prima sezione contiene un componente React etichettato 'div' con un singolo figlio etichettato 'Counter' che contiene una bolla di state etichettata 'count' con valore 3. La sezione centrale ha lo stesso genitore 'div', ma il componente figlio è stato eliminato, indicato da un'immagine gialla 'poof'. La terza sezione ha di nuovo lo stesso genitore 'div', ora con un nuovo figlio etichettato 'p', evidenziato in giallo.">
 
-When `Counter` changes to `p`, the `Counter` is deleted and the `p` is added
+Quando `Counter` diventa `p`, il `Counter` viene eliminato e il `p` viene aggiunto
 
 </Diagram>
 
@@ -575,15 +582,15 @@ When `Counter` changes to `p`, the `Counter` is deleted and the `p` is added
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_pt2" height={290} width={753} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'p'. The middle section has the same 'div' parent, but the child component has now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, highlighted in yellow.">
+<Diagram name="preserving_state_diff_pt2" height={290} width={753} alt="Diagramma con tre sezioni, con una freccia di transizione tra ciascuna sezione. La prima sezione contiene un componente React etichettato 'p'. La sezione centrale ha lo stesso genitore 'div', ma il componente figlio è stato eliminato, indicato da un'immagine gialla 'poof'. La terza sezione ha di nuovo lo stesso genitore 'div', ora con un nuovo figlio etichettato 'Counter' che contiene una bolla di state etichettata 'count' con valore 0, evidenziato in giallo.">
 
-When switching back, the `p` is deleted and the `Counter` is added
+Quando si torna indietro, il `p` viene eliminato e il `Counter` viene aggiunto
 
 </Diagram>
 
 </DiagramGroup>
 
-Also, **when you render a different component in the same position, it resets the state of its entire subtree.** To see how this works, increment the counter and then tick the checkbox:
+Inoltre, **quando renderizzi un componente diverso nella stessa posizione, reimposta lo state dell'intero sottoalbero.** Per vedere come funziona, incrementa il contatore e poi seleziona la checkbox:
 
 <Sandpack>
 
@@ -611,7 +618,7 @@ export default function App() {
             setIsFancy(e.target.checked)
           }}
         />
-        Use fancy styling
+        Usa stile elegante
       </label>
     </div>
   );
@@ -637,7 +644,7 @@ function Counter({ isFancy }) {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Aggiungi uno
       </button>
     </div>
   );
@@ -672,13 +679,13 @@ label {
 
 </Sandpack>
 
-The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `section` to a `div`. When the child `section` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well.
+Lo state del contatore viene reimpostato quando clicchi la checkbox. Anche se renderizzi un `Counter`, il primo figlio del `div` cambia da un `section` a un `div`. Quando il figlio `section` è stato rimosso dal DOM, l'intero albero sotto di esso (inclusi il `Counter` e il suo state) è stato distrutto.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_same_pt1" height={350} width={794} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'section', which has a single child labeled 'Counter' containing a state bubble labeled 'count' with value 3. The middle section has the same 'div' parent, but the child components have now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'div', highlighted in yellow, also with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, all highlighted in yellow.">
+<Diagram name="preserving_state_diff_same_pt1" height={350} width={794} alt="Diagramma con tre sezioni, con una freccia di transizione tra ciascuna sezione. La prima sezione contiene un componente React etichettato 'div' con un singolo figlio etichettato 'section', che ha un singolo figlio etichettato 'Counter' che contiene una bolla di state etichettata 'count' con valore 3. La sezione centrale ha lo stesso genitore 'div', ma i componenti figli sono stati eliminati, indicato da un'immagine gialla 'poof'. La terza sezione ha di nuovo lo stesso genitore 'div', ora con un nuovo figlio etichettato 'div', evidenziato in giallo, anche con un nuovo figlio etichettato 'Counter' che contiene una bolla di state etichettata 'count' con valore 0, tutto evidenziato in giallo.">
 
-When `section` changes to `div`, the `section` is deleted and the new `div` is added
+Quando `section` diventa `div`, il `section` viene eliminato e il nuovo `div` viene aggiunto
 
 </Diagram>
 
@@ -686,21 +693,21 @@ When `section` changes to `div`, the `section` is deleted and the new `div` is a
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_same_pt2" height={350} width={794} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'div', which has a single child labeled 'Counter' containing a state bubble labeled 'count' with value 0. The middle section has the same 'div' parent, but the child components have now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'section', highlighted in yellow, also with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, all highlighted in yellow.">
+<Diagram name="preserving_state_diff_same_pt2" height={350} width={794} alt="Diagramma con tre sezioni, con una freccia di transizione tra ciascuna sezione. La prima sezione contiene un componente React etichettato 'div' con un singolo figlio etichettato 'div', che ha un singolo figlio etichettato 'Counter' che contiene una bolla di state etichettata 'count' con valore 0. La sezione centrale ha lo stesso genitore 'div', ma i componenti figli sono stati eliminati, indicato da un'immagine gialla 'poof'. La terza sezione ha di nuovo lo stesso genitore 'div', ora con un nuovo figlio etichettato 'section', evidenziato in giallo, anche con un nuovo figlio etichettato 'Counter' che contiene una bolla di state etichettata 'count' con valore 0, tutto evidenziato in giallo.">
 
-When switching back, the `div` is deleted and the new `section` is added
+Quando si torna indietro, il `div` viene eliminato e il nuovo `section` viene aggiunto
 
 </Diagram>
 
 </DiagramGroup>
 
-As a rule of thumb, **if you want to preserve the state between re-renders, the structure of your tree needs to "match up"** from one render to another. If the structure is different, the state gets destroyed because React destroys state when it removes a component from the tree.
+Come regola generale, **se vuoi preservare lo state tra le ri-renderizzazioni, la struttura del tuo albero deve "corrispondere"** da una renderizzazione all'altra. Se la struttura è diversa, lo state viene distrutto perché React distrugge lo state quando rimuove un componente dall'albero.
 
 <Pitfall>
 
-This is why you should not nest component function definitions.
+Ecco perché non dovresti annidare definizioni di funzioni componente.
 
-Here, the `MyTextField` component function is defined *inside* `MyComponent`:
+Qui, la funzione componente `MyTextField` è definita *dentro* `MyComponent`:
 
 <Sandpack>
 
@@ -726,7 +733,7 @@ export default function MyComponent() {
       <MyTextField />
       <button onClick={() => {
         setCounter(counter + 1)
-      }}>Clicked {counter} times</button>
+      }}>Cliccato {counter} volte</button>
     </>
   );
 }
@@ -735,13 +742,13 @@ export default function MyComponent() {
 </Sandpack>
 
 
-Every time you click the button, the input state disappears! This is because a *different* `MyTextField` function is created for every render of `MyComponent`. You're rendering a *different* component in the same position, so React resets all state below. This leads to bugs and performance problems. To avoid this problem, **always declare component functions at the top level, and don't nest their definitions.**
+Ogni volta che clicchi il pulsante, lo state dell'input scompare! Questo perché una funzione `MyTextField` *diversa* viene creata a ogni renderizzazione di `MyComponent`. Stai renderizzando un componente *diverso* nella stessa posizione, quindi React reimposta tutto lo state sotto. Questo porta a bug e problemi di performance. Per evitare questo problema, **dichiara sempre le funzioni componente al top level e non annidare le loro definizioni.**
 
 </Pitfall>
 
-## Resetting state at the same position {/*resetting-state-at-the-same-position*/}
+## Reimpostare lo state nella stessa posizione {/*resetting-state-at-the-same-position*/}
 
-By default, React preserves state of a component while it stays at the same position. Usually, this is exactly what you want, so it makes sense as the default behavior. But sometimes, you may want to reset a component's state. Consider this app that lets two players keep track of their scores during each turn:
+Per impostazione predefinita, React preserva lo state di un componente finché resta nella stessa posizione. Di solito, è esattamente ciò che vuoi, quindi ha senso come comportamento predefinito. Ma a volte, potresti voler reimpostare lo state di un componente. Considera questa app che permette a due giocatori di tenere traccia dei propri punteggi durante ogni turno:
 
 <Sandpack>
 
@@ -760,7 +767,7 @@ export default function Scoreboard() {
       <button onClick={() => {
         setIsPlayerA(!isPlayerA);
       }}>
-        Next player!
+        Giocatore successivo!
       </button>
     </div>
   );
@@ -783,7 +790,7 @@ function Counter({ person }) {
     >
       <h1>{person}'s score: {score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Aggiungi uno
       </button>
     </div>
   );
@@ -811,19 +818,19 @@ h1 {
 
 </Sandpack>
 
-Currently, when you change the player, the score is preserved. The two `Counter`s appear in the same position, so React sees them as *the same* `Counter` whose `person` prop has changed.
+Attualmente, quando cambi giocatore, il punteggio viene preservato. I due `Counter` appaiono nella stessa posizione, quindi React li vede come *lo stesso* `Counter` la cui prop `person` è cambiata.
 
-But conceptually, in this app they should be two separate counters. They might appear in the same place in the UI, but one is a counter for Taylor, and another is a counter for Sarah.
+Ma concettualmente, in questa app dovrebbero essere due contatori separati. Potrebbero apparire nello stesso posto nell'UI, ma uno è un contatore per Taylor e l'altro è un contatore per Sarah.
 
-There are two ways to reset state when switching between them:
+Ci sono due modi per reimpostare lo state quando passi da uno all'altro:
 
-1. Render components in different positions
-2. Give each component an explicit identity with `key`
+1. Renderizzare i componenti in posizioni diverse
+2. Dare a ciascun componente un'identità esplicita con `key`
 
 
-### Option 1: Rendering a component in different positions {/*option-1-rendering-a-component-in-different-positions*/}
+### Opzione 1: Renderizzare un componente in posizioni diverse {/*option-1-rendering-a-component-in-different-positions*/}
 
-If you want these two `Counter`s to be independent, you can render them in two different positions:
+Se vuoi che questi due `Counter` siano indipendenti, puoi renderizzarli in due posizioni diverse:
 
 <Sandpack>
 
@@ -843,7 +850,7 @@ export default function Scoreboard() {
       <button onClick={() => {
         setIsPlayerA(!isPlayerA);
       }}>
-        Next player!
+        Giocatore successivo!
       </button>
     </div>
   );
@@ -866,7 +873,7 @@ function Counter({ person }) {
     >
       <h1>{person}'s score: {score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Aggiungi uno
       </button>
     </div>
   );
@@ -894,42 +901,42 @@ h1 {
 
 </Sandpack>
 
-* Initially, `isPlayerA` is `true`. So the first position contains `Counter` state, and the second one is empty.
-* When you click the "Next player" button the first position clears but the second one now contains a `Counter`.
+* Inizialmente, `isPlayerA` è `true`. Quindi la prima posizione contiene lo state di `Counter`, e la seconda è vuota.
+* Quando clicchi il pulsante "Giocatore successivo", la prima posizione si svuota ma la seconda ora contiene un `Counter`.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_position_p1" height={375} width={504} alt="Diagram with a tree of React components. The parent is labeled 'Scoreboard' with a state bubble labeled isPlayerA with value 'true'. The only child, arranged to the left, is labeled Counter with a state bubble labeled 'count' and value 0. All of the left child is highlighted in yellow, indicating it was added.">
+<Diagram name="preserving_state_diff_position_p1" height={375} width={504} alt="Diagramma con un albero di componenti React. Il genitore è etichettato 'Scoreboard' con una bolla di state etichettata isPlayerA con valore 'true'. L'unico figlio, disposto a sinistra, è etichettato Counter con una bolla di state etichettata 'count' e valore 0. Tutto il figlio sinistro è evidenziato in giallo, indicando che è stato aggiunto.">
 
-Initial state
+State iniziale
 
 </Diagram>
 
-<Diagram name="preserving_state_diff_position_p2" height={375} width={504} alt="Diagram with a tree of React components. The parent is labeled 'Scoreboard' with a state bubble labeled isPlayerA with value 'false'. The state bubble is highlighted in yellow, indicating that it has changed. The left child is replaced with a yellow 'poof' image indicating that it has been deleted and there is a new child on the right, highlighted in yellow indicating that it was added. The new child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0.">
+<Diagram name="preserving_state_diff_position_p2" height={375} width={504} alt="Diagramma con un albero di componenti React. Il genitore è etichettato 'Scoreboard' con una bolla di state etichettata isPlayerA con valore 'false'. La bolla di state è evidenziata in giallo, indicando che è cambiata. Il figlio sinistro è sostituito con un'immagine gialla 'poof' che indica che è stato eliminato e c'è un nuovo figlio a destra, evidenziato in giallo che indica che è stato aggiunto. Il nuovo figlio è etichettato 'Counter' e contiene una bolla di state etichettata 'count' con valore 0.">
 
-Clicking "next"
+Clic su "successivo"
 
 </Diagram>
 
-<Diagram name="preserving_state_diff_position_p3" height={375} width={504} alt="Diagram with a tree of React components. The parent is labeled 'Scoreboard' with a state bubble labeled isPlayerA with value 'true'. The state bubble is highlighted in yellow, indicating that it has changed. There is a new child on the left, highlighted in yellow indicating that it was added. The new child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is replaced with a yellow 'poof' image indicating that it has been deleted.">
+<Diagram name="preserving_state_diff_position_p3" height={375} width={504} alt="Diagramma con un albero di componenti React. Il genitore è etichettato 'Scoreboard' con una bolla di state etichettata isPlayerA con valore 'true'. La bolla di state è evidenziata in giallo, indicando che è cambiata. C'è un nuovo figlio a sinistra, evidenziato in giallo che indica che è stato aggiunto. Il nuovo figlio è etichettato 'Counter' e contiene una bolla di state etichettata 'count' con valore 0. Il figlio destro è sostituito con un'immagine gialla 'poof' che indica che è stato eliminato.">
 
-Clicking "next" again
+Clic su "successivo" di nuovo
 
 </Diagram>
 
 </DiagramGroup>
 
-Each `Counter`'s state gets destroyed each time it's removed from the DOM. This is why they reset every time you click the button.
+Lo state di ciascun `Counter` viene distrutto ogni volta che viene rimosso dal DOM. Ecco perché si reimpostano ogni volta che clicchi il pulsante.
 
-This solution is convenient when you only have a few independent components rendered in the same place. In this example, you only have two, so it's not a hassle to render both separately in the JSX.
+Questa soluzione è comoda quando hai solo pochi componenti indipendenti renderizzati nello stesso posto. In questo esempio, ne hai solo due, quindi non è un problema renderizzarli separatamente nel JSX.
 
-### Option 2: Resetting state with a key {/*option-2-resetting-state-with-a-key*/}
+### Opzione 2: Reimpostare lo state con una key {/*option-2-resetting-state-with-a-key*/}
 
-There is also another, more generic, way to reset a component's state.
+C'è anche un altro modo, più generico, per reimpostare lo state di un componente.
 
-You might have seen `key`s when [rendering lists.](/learn/rendering-lists#keeping-list-items-in-order-with-key) Keys aren't just for lists! You can use keys to make React distinguish between any components. By default, React uses order within the parent ("first counter", "second counter") to discern between components. But keys let you tell React that this is not just a *first* counter, or a *second* counter, but a specific counter--for example, *Taylor's* counter. This way, React will know *Taylor's* counter wherever it appears in the tree!
+Potresti aver visto le `key` quando [renderizzi liste.](/learn/rendering-lists#keeping-list-items-in-order-with-key) Le key non servono solo per le liste! Puoi usare le key per far distinguere a React qualsiasi componente. Per impostazione predefinita, React usa l'ordine all'interno del genitore ("primo contatore", "secondo contatore") per distinguere i componenti. Ma le key ti permettono di dire a React che questo non è solo un *primo* contatore, o un *secondo* contatore, ma un contatore specifico — ad esempio, il contatore di *Taylor*. In questo modo, React conoscerà il contatore di *Taylor* ovunque appaia nell'albero!
 
-In this example, the two `<Counter />`s don't share state even though they appear in the same place in JSX:
+In questo esempio, i due `<Counter />` non condividono lo state anche se appaiono nello stesso posto nel JSX:
 
 <Sandpack>
 
@@ -948,7 +955,7 @@ export default function Scoreboard() {
       <button onClick={() => {
         setIsPlayerA(!isPlayerA);
       }}>
-        Next player!
+        Giocatore successivo!
       </button>
     </div>
   );
@@ -971,7 +978,7 @@ function Counter({ person }) {
     >
       <h1>{person}'s score: {score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Aggiungi uno
       </button>
     </div>
   );
@@ -999,7 +1006,7 @@ h1 {
 
 </Sandpack>
 
-Switching between Taylor and Sarah does not preserve the state. This is because **you gave them different `key`s:**
+Passare tra Taylor e Sarah non preserva lo state. Questo perché **hai dato loro `key` diverse:**
 
 ```js
 {isPlayerA ? (
@@ -1009,19 +1016,19 @@ Switching between Taylor and Sarah does not preserve the state. This is because
 )}
 ```
 
-Specifying a `key` tells React to use the `key` itself as part of the position, instead of their order within the parent. This is why, even though you render them in the same place in JSX, React sees them as two different counters, and so they will never share state. Every time a counter appears on the screen, its state is created. Every time it is removed, its state is destroyed. Toggling between them resets their state over and over.
+Specificare una `key` dice a React di usare la `key` stessa come parte della posizione, invece del loro ordine all'interno del genitore. Ecco perché, anche se li renderizzi nello stesso posto nel JSX, React li vede come due contatori diversi, e quindi non condivideranno mai lo state. Ogni volta che un contatore appare sullo schermo, il suo state viene creato. Ogni volta che viene rimosso, il suo state viene distrutto. Alternare tra loro reimposta il loro state ogni volta.
 
 <Note>
 
-Remember that keys are not globally unique. They only specify the position *within the parent*.
+Ricorda che le key non sono univoche a livello globale. Specificano solo la posizione *all'interno del genitore*.
 
 </Note>
 
-### Resetting a form with a key {/*resetting-a-form-with-a-key*/}
+### Reimpostare un form con una key {/*resetting-a-form-with-a-key*/}
 
-Resetting state with a key is particularly useful when dealing with forms.
+Reimpostare lo state con una key è particolarmente utile quando si tratta di form.
 
-In this chat app, the `<Chat>` component contains the text input state:
+In questa app di chat, il componente `<Chat>` contiene lo state dell'input di testo:
 
 <Sandpack>
 
@@ -1084,11 +1091,11 @@ export default function Chat({ contact }) {
     <section className="chat">
       <textarea
         value={text}
-        placeholder={'Chat to ' + contact.name}
+        placeholder={'Chat con ' + contact.name}
         onChange={e => setText(e.target.value)}
       />
       <br />
-      <button>Send to {contact.email}</button>
+      <button>Invia a {contact.email}</button>
     </section>
   );
 }
@@ -1116,17 +1123,17 @@ textarea {
 
 </Sandpack>
 
-Try entering something into the input, and then press "Alice" or "Bob" to choose a different recipient. You will notice that the input state is preserved because the `<Chat>` is rendered at the same position in the tree.
+Prova a inserire qualcosa nell'input, e poi premi "Alice" o "Bob" per scegliere un destinatario diverso. Noterai che lo state dell'input viene preservato perché `<Chat>` è renderizzato nella stessa posizione nell'albero.
 
-**In many apps, this may be the desired behavior, but not in a chat app!** You don't want to let the user send a message they already typed to a wrong person due to an accidental click. To fix it, add a `key`:
+**In molte app, questo potrebbe essere il comportamento desiderato, ma non in un'app di chat!** Non vuoi permettere all'utente di inviare a una persona sbagliata un messaggio che ha già digitato a causa di un clic accidentale. Per risolverlo, aggiungi una `key`:
 
 ```js
 <Chat key={to.id} contact={to} />
 ```
 
-This ensures that when you select a different recipient, the `Chat` component will be recreated from scratch, including any state in the tree below it. React will also re-create the DOM elements instead of reusing them.
+Questo garantisce che quando selezioni un destinatario diverso, il componente `Chat` verrà ricreato da zero, incluso qualsiasi state nell'albero sotto di esso. React ricreerà anche gli elementi DOM invece di riutilizzarli.
 
-Now switching the recipient always clears the text field:
+Ora cambiare destinatario svuota sempre il campo di testo:
 
 <Sandpack>
 
@@ -1189,11 +1196,11 @@ export default function Chat({ contact }) {
     <section className="chat">
       <textarea
         value={text}
-        placeholder={'Chat to ' + contact.name}
+        placeholder={'Chat con ' + contact.name}
         onChange={e => setText(e.target.value)}
       />
       <br />
-      <button>Send to {contact.email}</button>
+      <button>Invia a {contact.email}</button>
     </section>
   );
 }
@@ -1223,24 +1230,24 @@ textarea {
 
 <DeepDive>
 
-#### Preserving state for removed components {/*preserving-state-for-removed-components*/}
+#### Preservare lo state per componenti rimossi {/*preserving-state-for-removed-components*/}
 
-In a real chat app, you'd probably want to recover the input state when the user selects the previous recipient again. There are a few ways to keep the state "alive" for a component that's no longer visible:
+In una vera app di chat, probabilmente vorresti recuperare lo state dell'input quando l'utente seleziona di nuovo il destinatario precedente. Ci sono alcuni modi per mantenere lo state "vivo" per un componente che non è più visibile:
 
-- You could render _all_ chats instead of just the current one, but hide all the others with CSS. The chats would not get removed from the tree, so their local state would be preserved. This solution works great for simple UIs. But it can get very slow if the hidden trees are large and contain a lot of DOM nodes.
-- You could [lift the state up](/learn/sharing-state-between-components) and hold the pending message for each recipient in the parent component. This way, when the child components get removed, it doesn't matter, because it's the parent that keeps the important information. This is the most common solution.
-- You might also use a different source in addition to React state. For example, you probably want a message draft to persist even if the user accidentally closes the page. To implement this, you could have the `Chat` component initialize its state by reading from the [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), and save the drafts there too.
+- Potresti renderizzare _tutte_ le chat invece di solo quella corrente, ma nascondere tutte le altre con CSS. Le chat non verrebbero rimosse dall'albero, quindi il loro state locale verrebbe preservato. Questa soluzione funziona benissimo per UI semplici. Ma può diventare molto lenta se gli alberi nascosti sono grandi e contengono molti nodi DOM.
+- Potresti [alzare lo state](/learn/sharing-state-between-components) e conservare il messaggio in sospeso per ciascun destinatario nel componente genitore. In questo modo, quando i componenti figli vengono rimossi, non importa, perché è il genitore che conserva le informazioni importanti. Questa è la soluzione più comune.
+- Potresti anche usare una fonte diversa oltre allo state di React. Ad esempio, probabilmente vuoi che una bozza di messaggio persista anche se l'utente chiude accidentalmente la pagina. Per implementarlo, potresti far inizializzare al componente `Chat` il suo state leggendo da [`localStorage`](https://developer.mozilla.org/it/docs/Web/API/Window/localStorage), e salvare le bozze lì.
 
-No matter which strategy you pick, a chat _with Alice_ is conceptually distinct from a chat _with Bob_, so it makes sense to give a `key` to the `<Chat>` tree based on the current recipient.
+Indipendentemente dalla strategia che scegli, una chat _con Alice_ è concettualmente distinta da una chat _con Bob_, quindi ha senso dare una `key` all'albero `<Chat>` in base al destinatario corrente.
 
 </DeepDive>
 
 <Recap>
 
-- React keeps state for as long as the same component is rendered at the same position.
-- State is not kept in JSX tags. It's associated with the tree position in which you put that JSX.
-- You can force a subtree to reset its state by giving it a different key.
-- Don't nest component definitions, or you'll reset state by accident.
+- React mantiene lo state finché lo stesso componente è renderizzato nella stessa posizione.
+- Lo state non è conservato nei tag JSX. È associato alla posizione nell'albero in cui metti quel JSX.
+- Puoi forzare un sottoalbero a reimpostare il suo state dandogli una key diversa.
+- Non annidare definizioni di componenti, altrimenti reimposterai lo state per sbaglio.
 
 </Recap>
 
@@ -1248,9 +1255,9 @@ No matter which strategy you pick, a chat _with Alice_ is conceptually distinct
 
 <Challenges>
 
-#### Fix disappearing input text {/*fix-disappearing-input-text*/}
+#### Correggere il testo dell'input che scompare {/*fix-disappearing-input-text*/}
 
-This example shows a message when you press the button. However, pressing the button also accidentally resets the input. Why does this happen? Fix it so that pressing the button does not reset the input text.
+Questo esempio mostra un messaggio quando premi il pulsante. Tuttavia, premere il pulsante reimposta anche accidentalmente l'input. Perché succede? Correggilo in modo che premere il pulsante non reimposti il testo dell'input.
 
 <Sandpack>
 
@@ -1262,11 +1269,11 @@ export default function App() {
   if (showHint) {
     return (
       <div>
-        <p><i>Hint: Your favorite city?</i></p>
+        <p><i>Suggerimento: La tua città preferita?</i></p>
         <Form />
         <button onClick={() => {
           setShowHint(false);
-        }}>Hide hint</button>
+        }}>Nascondi suggerimento</button>
       </div>
     );
   }
@@ -1275,7 +1282,7 @@ export default function App() {
       <Form />
       <button onClick={() => {
         setShowHint(true);
-      }}>Show hint</button>
+      }}>Mostra suggerimento</button>
     </div>
   );
 }
@@ -1299,9 +1306,9 @@ textarea { display: block; margin: 10px 0; }
 
 <Solution>
 
-The problem is that `Form` is rendered in different positions. In the `if` branch, it is the second child of the `<div>`, but in the `else` branch, it is the first child. Therefore, the component type in each position changes. The first position changes between holding a `p` and a `Form`, while the second position changes between holding a `Form` and a `button`. React resets the state every time the component type changes.
+Il problema è che `Form` è renderizzato in posizioni diverse. Nel ramo `if`, è il secondo figlio del `<div>`, ma nel ramo `else`, è il primo figlio. Quindi, il tipo di componente in ciascuna posizione cambia. La prima posizione alterna tra contenere un `p` e un `Form`, mentre la seconda posizione alterna tra contenere un `Form` e un `button`. React reimposta lo state ogni volta che il tipo di componente cambia.
 
-The easiest solution is to unify the branches so that `Form` always renders in the same position:
+La soluzione più semplice è unificare i rami in modo che `Form` venga sempre renderizzato nella stessa posizione:
 
 <Sandpack>
 
@@ -1313,17 +1320,17 @@ export default function App() {
   return (
     <div>
       {showHint &&
-        <p><i>Hint: Your favorite city?</i></p>
+        <p><i>Suggerimento: La tua città preferita?</i></p>
       }
       <Form />
       {showHint ? (
         <button onClick={() => {
           setShowHint(false);
-        }}>Hide hint</button>
+        }}>Nascondi suggerimento</button>
       ) : (
         <button onClick={() => {
           setShowHint(true);
-        }}>Show hint</button>
+        }}>Mostra suggerimento</button>
       )}
     </div>
   );
@@ -1347,7 +1354,7 @@ textarea { display: block; margin: 10px 0; }
 </Sandpack>
 
 
-Technically, you could also add `null` before `<Form />` in the `else` branch to match the `if` branch structure:
+Tecnicamente, potresti anche aggiungere `null` prima di `<Form />` nel ramo `else` per corrispondere alla struttura del ramo `if`:
 
 <Sandpack>
 
@@ -1359,11 +1366,11 @@ export default function App() {
   if (showHint) {
     return (
       <div>
-        <p><i>Hint: Your favorite city?</i></p>
+        <p><i>Suggerimento: La tua città preferita?</i></p>
         <Form />
         <button onClick={() => {
           setShowHint(false);
-        }}>Hide hint</button>
+        }}>Nascondi suggerimento</button>
       </div>
     );
   }
@@ -1373,7 +1380,7 @@ export default function App() {
       <Form />
       <button onClick={() => {
         setShowHint(true);
-      }}>Show hint</button>
+      }}>Mostra suggerimento</button>
     </div>
   );
 }
@@ -1395,19 +1402,19 @@ textarea { display: block; margin: 10px 0; }
 
 </Sandpack>
 
-This way, `Form` is always the second child, so it stays in the same position and keeps its state. But this approach is much less obvious and introduces a risk that someone else will remove that `null`.
+In questo modo, `Form` è sempre il secondo figlio, quindi resta nella stessa posizione e mantiene il suo state. Ma questo approccio è molto meno ovvio e introduce il rischio che qualcun altro rimuova quel `null`.
 
 </Solution>
 
-#### Swap two form fields {/*swap-two-form-fields*/}
+#### Scambiare due campi del form {/*swap-two-form-fields*/}
 
-This form lets you enter first and last name. It also has a checkbox controlling which field goes first. When you tick the checkbox, the "Last name" field will appear before the "First name" field.
+Questo form ti permette di inserire nome e cognome. Ha anche una checkbox che controlla quale campo va per primo. Quando selezioni la checkbox, il campo "Cognome" apparirà prima del campo "Nome".
 
-It almost works, but there is a bug. If you fill in the "First name" input and tick the checkbox, the text will stay in the first input (which is now "Last name"). Fix it so that the input text *also* moves when you reverse the order.
+Funziona quasi, ma c'è un bug. Se compili l'input "Nome" e selezioni la checkbox, il testo resterà nel primo input (che ora è "Cognome"). Correggilo in modo che il testo dell'input *si sposti* anche quando inverti l'ordine.
 
 <Hint>
 
-It seems like for these fields, their position within the parent is not enough. Is there some way to tell React how to match up the state between re-renders?
+Sembra che per questi campi, la loro posizione all'interno del genitore non basti. C'è un modo per dire a React come abbinare lo state tra le ri-renderizzazioni?
 
 </Hint>
 
@@ -1425,22 +1432,22 @@ export default function App() {
         checked={reverse}
         onChange={e => setReverse(e.target.checked)}
       />
-      Reverse order
+      Ordine inverso
     </label>
   );
   if (reverse) {
     return (
       <>
-        <Field label="Last name" />
-        <Field label="First name" />
+        <Field label="Cognome" />
+        <Field label="Nome" />
         {checkbox}
       </>
     );
   } else {
     return (
       <>
-        <Field label="First name" />
-        <Field label="Last name" />
+        <Field label="Nome" />
+        <Field label="Cognome" />
         {checkbox}
       </>
     );
@@ -1471,7 +1478,7 @@ label { display: block; margin: 10px 0; }
 
 <Solution>
 
-Give a `key` to both `<Field>` components in both `if` and `else` branches. This tells React how to "match up" the correct state for either `<Field>` even if their order within the parent changes:
+Dai una `key` a entrambi i componenti `<Field>` in entrambi i rami `if` e `else`. Questo dice a React come "abbinare" lo state corretto per ciascun `<Field>` anche se il loro ordine all'interno del genitore cambia:
 
 <Sandpack>
 
@@ -1487,22 +1494,22 @@ export default function App() {
         checked={reverse}
         onChange={e => setReverse(e.target.checked)}
       />
-      Reverse order
+      Ordine inverso
     </label>
   );
   if (reverse) {
     return (
       <>
-        <Field key="lastName" label="Last name" />
-        <Field key="firstName" label="First name" />
+        <Field key="lastName" label="Cognome" />
+        <Field key="firstName" label="Nome" />
         {checkbox}
       </>
     );
   } else {
     return (
       <>
-        <Field key="firstName" label="First name" />
-        <Field key="lastName" label="Last name" />
+        <Field key="firstName" label="Nome" />
+        <Field key="lastName" label="Cognome" />
         {checkbox}
       </>
     );
@@ -1533,11 +1540,11 @@ label { display: block; margin: 10px 0; }
 
 </Solution>
 
-#### Reset a detail form {/*reset-a-detail-form*/}
+#### Reimpostare un form di dettaglio {/*reset-a-detail-form*/}
 
-This is an editable contact list. You can edit the selected contact's details and then either press "Save" to update it, or "Reset" to undo your changes.
+Questa è una lista di contatti modificabile. Puoi modificare i dettagli del contatto selezionato e poi premere "Salva" per aggiornarlo, o "Reimposta" per annullare le modifiche.
 
-When you select a different contact (for example, Alice), the state updates but the form keeps showing the previous contact's details. Fix it so that the form gets reset when the selected contact changes.
+Quando selezioni un contatto diverso (ad esempio, Alice), lo state viene aggiornato ma il form continua a mostrare i dettagli del contatto precedente. Correggilo in modo che il form venga reimpostato quando cambia il contatto selezionato.
 
 <Sandpack>
 
@@ -1629,7 +1636,7 @@ export default function EditContact({ initialData, onSave }) {
   return (
     <section>
       <label>
-        Name:{' '}
+        Nome:{' '}
         <input
           type="text"
           value={name}
@@ -1652,13 +1659,13 @@ export default function EditContact({ initialData, onSave }) {
         };
         onSave(updatedData);
       }}>
-        Save
+        Salva
       </button>
       <button onClick={() => {
         setName(initialData.name);
         setEmail(initialData.email);
       }}>
-        Reset
+        Reimposta
       </button>
     </section>
   );
@@ -1689,7 +1696,7 @@ button {
 
 <Solution>
 
-Give `key={selectedId}` to the `EditContact` component. This way, switching between different contacts will reset the form:
+Dai `key={selectedId}` al componente `EditContact`. In questo modo, passare tra contatti diversi reimposterà il form:
 
 <Sandpack>
 
@@ -1782,7 +1789,7 @@ export default function EditContact({ initialData, onSave }) {
   return (
     <section>
       <label>
-        Name:{' '}
+        Nome:{' '}
         <input
           type="text"
           value={name}
@@ -1805,13 +1812,13 @@ export default function EditContact({ initialData, onSave }) {
         };
         onSave(updatedData);
       }}>
-        Save
+        Salva
       </button>
       <button onClick={() => {
         setName(initialData.name);
         setEmail(initialData.email);
       }}>
-        Reset
+        Reimposta
       </button>
     </section>
   );
@@ -1842,13 +1849,13 @@ button {
 
 </Solution>
 
-#### Clear an image while it's loading {/*clear-an-image-while-its-loading*/}
+#### Svuotare un'immagine mentre si carica {/*clear-an-image-while-its-loading*/}
 
-When you press "Next", the browser starts loading the next image. However, because it's displayed in the same `<img>` tag, by default you would still see the previous image until the next one loads. This may be undesirable if it's important for the text to always match the image. Change it so that the moment you press "Next", the previous image immediately clears.
+Quando premi "Successivo", il browser inizia a caricare l'immagine successiva. Tuttavia, poiché viene visualizzata nello stesso tag `<img>`, per impostazione predefinita vedresti ancora l'immagine precedente finché la successiva non si carica. Questo può essere indesiderabile se è importante che il testo corrisponda sempre all'immagine. Modificalo in modo che nel momento in cui premi "Successivo", l'immagine precedente si svuoti immediatamente.
 
 <Hint>
 
-Is there a way to tell React to re-create the DOM instead of reusing it?
+C'è un modo per dire a React di ricreare il DOM invece di riutilizzarlo?
 
 </Hint>
 
@@ -1873,10 +1880,10 @@ export default function Gallery() {
   return (
     <>
       <button onClick={handleClick}>
-        Next
+        Successivo
       </button>
       <h3>
-        Image {index + 1} of {images.length}
+        Immagine {index + 1} di {images.length}
       </h3>
       <img src={image.src} />
       <p>
@@ -1918,7 +1925,7 @@ img { width: 150px; height: 150px; }
 
 <Solution>
 
-You can provide a `key` to the `<img>` tag. When that `key` changes, React will re-create the `<img>` DOM node from scratch. This causes a brief flash when each image loads, so it's not something you'd want to do for every image in your app. But it makes sense if you want to ensure the image always matches the text.
+Puoi fornire una `key` al tag `<img>`. Quando quella `key` cambia, React ricreerà il nodo DOM `<img>` da zero. Questo causa un breve flash quando ogni immagine si carica, quindi non è qualcosa che vorresti fare per ogni immagine nella tua app. Ma ha senso se vuoi assicurarti che l'immagine corrisponda sempre al testo.
 
 <Sandpack>
 
@@ -1941,10 +1948,10 @@ export default function Gallery() {
   return (
     <>
       <button onClick={handleClick}>
-        Next
+        Successivo
       </button>
       <h3>
-        Image {index + 1} of {images.length}
+        Immagine {index + 1} di {images.length}
       </h3>
       <img key={image.src} src={image.src} />
       <p>
@@ -1986,11 +1993,11 @@ img { width: 150px; height: 150px; }
 
 </Solution>
 
-#### Fix misplaced state in the list {/*fix-misplaced-state-in-the-list*/}
+#### Correggere lo state fuori posto nella lista {/*fix-misplaced-state-in-the-list*/}
 
-In this list, each `Contact` has state that determines whether "Show email" has been pressed for it. Press "Show email" for Alice, and then tick the "Show in reverse order" checkbox. You will notice that it's _Taylor's_ email that is expanded now, but Alice's--which has moved to the bottom--appears collapsed.
+In questa lista, ogni `Contact` ha uno state che determina se "Mostra email" è stato premuto per esso. Premi "Mostra email" per Alice, e poi seleziona la checkbox "Mostra in ordine inverso". Noterai che è l'email di _Taylor_ ad essere espansa ora, ma quella di Alice — che si è spostata in fondo — appare collassata.
 
-Fix it so that the expanded state is associated with each contact, regardless of the chosen ordering.
+Correggilo in modo che lo state espanso sia associato a ciascun contatto, indipendentemente dall'ordinamento scelto.
 
 <Sandpack>
 
@@ -2016,7 +2023,7 @@ export default function ContactList() {
             setReverse(e.target.checked)
           }}
         />{' '}
-        Show in reverse order
+        Mostra in ordine inverso
       </label>
       <ul>
         {displayedContacts.map((contact, i) =>
@@ -2050,7 +2057,7 @@ export default function Contact({ contact }) {
       <button onClick={() => {
         setExpanded(!expanded);
       }}>
-        {expanded ? 'Hide' : 'Show'} email
+        {expanded ? 'Nascondi' : 'Mostra'} email
       </button>
     </>
   );
@@ -2080,16 +2087,16 @@ button {
 
 <Solution>
 
-The problem is that this example was using index as a `key`:
+Il problema è che questo esempio usava l'indice come `key`:
 
 ```js
 {displayedContacts.map((contact, i) =>
   <li key={i}>
 ```
 
-However, you want the state to be associated with _each particular contact_.
+Tuttavia, vuoi che lo state sia associato a _ciascun contatto specifico_.
 
-Using the contact ID as a `key` instead fixes the issue:
+Usare l'ID del contatto come `key` risolve il problema:
 
 <Sandpack>
 
@@ -2115,7 +2122,7 @@ export default function ContactList() {
             setReverse(e.target.checked)
           }}
         />{' '}
-        Show in reverse order
+        Mostra in ordine inverso
       </label>
       <ul>
         {displayedContacts.map(contact =>
@@ -2149,7 +2156,7 @@ export default function Contact({ contact }) {
       <button onClick={() => {
         setExpanded(!expanded);
       }}>
-        {expanded ? 'Hide' : 'Show'} email
+        {expanded ? 'Nascondi' : 'Mostra'} email
       </button>
     </>
   );
@@ -2177,7 +2184,7 @@ button {
 
 </Sandpack>
 
-State is associated with the tree position. A `key` lets you specify a named position instead of relying on order.
+Lo state è associato alla posizione nell'albero. Una `key` ti permette di specificare una posizione nominata invece di basarti sull'ordine.
 
 </Solution>
 
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 44c3228e1..e0c0635a9 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -181,7 +181,7 @@
           "path": "/learn/sharing-state-between-components"
         },
         {
-          "title": "Preserving and Resetting State",
+          "title": "Preservare e Reimpostare lo State",
           "path": "/learn/preserving-and-resetting-state"
         },
         {

From 65c50cc1b47cea6e4d1ebf6271568fbddb4bf29c Mon Sep 17 00:00:00 2001
From: Alessandro De Blasis <alex@deblasis.net>
Date: Tue, 15 Sep 2026 12:06:45 +0300
Subject: [PATCH 2/2] fix(learn): address review for
 preserving-and-resetting-state (PR #735)

Signed-off-by: Alessandro De Blasis <alex@deblasis.net>
Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/content/learn/preserving-and-resetting-state.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index b42463995..88ca00e57 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -788,7 +788,7 @@ function Counter({ person }) {
       onPointerEnter={() => setHover(true)}
       onPointerLeave={() => setHover(false)}
     >
-      <h1>{person}'s score: {score}</h1>
+      <h1>Punteggio di {person}: {score}</h1>
       <button onClick={() => setScore(score + 1)}>
         Aggiungi uno
       </button>
@@ -871,7 +871,7 @@ function Counter({ person }) {
       onPointerEnter={() => setHover(true)}
       onPointerLeave={() => setHover(false)}
     >
-      <h1>{person}'s score: {score}</h1>
+      <h1>Punteggio di {person}: {score}</h1>
       <button onClick={() => setScore(score + 1)}>
         Aggiungi uno
       </button>
@@ -976,7 +976,7 @@ function Counter({ person }) {
       onPointerEnter={() => setHover(true)}
       onPointerLeave={() => setHover(false)}
     >
-      <h1>{person}'s score: {score}</h1>
+      <h1>Punteggio di {person}: {score}</h1>
       <button onClick={() => setScore(score + 1)}>
         Aggiungi uno
       </button>