diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index 2d1ee8685..a6b794564 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -1,52 +1,52 @@
 ---
-title: 'Manipulating the DOM with Refs'
+title: 'Manipolare il DOM con i Refs'
 ---
 
 <Intro>
 
-React automatically updates the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) to match your render output, so your components won't often need to manipulate it. However, sometimes you might need access to the DOM elements managed by React--for example, to focus a node, scroll to it, or measure its size and position. There is no built-in way to do those things in React, so you will need a *ref* to the DOM node.
+React aggiorna automaticamente il [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) per corrispondere al tuo output di rendering, quindi i tuoi componenti non avranno spesso bisogno di manipolarlo. Tuttavia, a volte potresti aver bisogno di accedere agli elementi DOM gestiti da React--per esempio, per mettere a fuoco un nodo, scorrere fino ad esso o misurarne le dimensioni e la posizione. Non c'è un modo integrato per fare queste cose in React, quindi avrai bisogno di un *ref* al nodo DOM.
 
 </Intro>
 
 <YouWillLearn>
 
-- How to access a DOM node managed by React with the `ref` attribute
-- How the `ref` JSX attribute relates to the `useRef` Hook
-- How to access another component's DOM node
-- In which cases it's safe to modify the DOM managed by React
+- Come accedere a un nodo DOM gestito da React con l'attributo `ref`
+- Come l'attributo JSX `ref` si relaziona all'Hook `useRef`
+- Come accedere al nodo DOM di un altro componente
+- In quali casi è sicuro modificare il DOM gestito da React
 
 </YouWillLearn>
 
-## Getting a ref to the node {/*getting-a-ref-to-the-node*/}
+## Ottenere un ref al nodo {/*getting-a-ref-to-the-node*/}
 
-To access a DOM node managed by React, first, import the `useRef` Hook:
+Per accedere a un nodo DOM gestito da React, prima importa l'Hook `useRef`:
 
 ```js
 import { useRef } from 'react';
 ```
 
-Then, use it to declare a ref inside your component:
+Quindi, usalo per dichiarare un ref all'interno del tuo componente:
 
 ```js
 const myRef = useRef(null);
 ```
 
-Finally, pass your ref as the `ref` attribute to the JSX tag for which you want to get the DOM node:
+Infine, passa il tuo ref come attributo `ref` al tag JSX per il quale vuoi ottenere il nodo DOM:
 
 ```js
 <div ref={myRef}>
 ```
 
-The `useRef` Hook returns an object with a single property called `current`. Initially, `myRef.current` will be `null`. When React creates a DOM node for this `<div>`, React will put a reference to this node into `myRef.current`. You can then access this DOM node from your [event handlers](/learn/responding-to-events) and use the built-in [browser APIs](https://developer.mozilla.org/docs/Web/API/Element) defined on it.
+L'Hook `useRef` restituisce un oggetto con una singola proprietà chiamata `current`. Inizialmente, `myRef.current` sarà `null`. Quando React crea un nodo DOM per questo `<div>`, React metterà un riferimento a questo nodo in `myRef.current`. Potrai quindi accedere a questo nodo DOM dai tuoi [gestori di eventi](/learn/responding-to-events) e usare le [API del browser](https://developer.mozilla.org/docs/Web/API/Element) integrate definite su di esso.
 
 ```js
-// You can use any browser APIs, for example:
+// Puoi usare qualsiasi API del browser, per esempio:
 myRef.current.scrollIntoView();
 ```
 
-### Example: Focusing a text input {/*example-focusing-a-text-input*/}
+### Esempio: Mettere a fuoco un input di testo {/*example-focusing-a-text-input*/}
 
-In this example, clicking the button will focus the input:
+In questo esempio, cliccando il pulsante verrà messo a fuoco l'input:
 
 <Sandpack>
 
@@ -64,7 +64,7 @@ export default function Form() {
     <>
       <input ref={inputRef} />
       <button onClick={handleClick}>
-        Focus the input
+        Metti a fuoco l'input
       </button>
     </>
   );
@@ -73,18 +73,18 @@ export default function Form() {
 
 </Sandpack>
 
-To implement this:
+Per implementare questo:
 
-1. Declare `inputRef` with the `useRef` Hook.
-2. Pass it as `<input ref={inputRef}>`. This tells React to **put this `<input>`'s DOM node into `inputRef.current`.**
-3. In the `handleClick` function, read the input DOM node from `inputRef.current` and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it with `inputRef.current.focus()`.
-4. Pass the `handleClick` event handler to `<button>` with `onClick`.
+1. Dichiara `inputRef` con l'Hook `useRef`.
+2. Passalo come `<input ref={inputRef}>`. Questo dice a React di **mettere il nodo DOM di questo `<input>` in `inputRef.current`.**
+3. Nella funzione `handleClick`, leggi il nodo DOM dell'input da `inputRef.current` e chiama [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) su di esso con `inputRef.current.focus()`.
+4. Passa il gestore di eventi `handleClick` a `<button>` con `onClick`.
 
-While DOM manipulation is the most common use case for refs, the `useRef` Hook can be used for storing other things outside React, like timer IDs. Similarly to state, refs remain between renders. Refs are like state variables that don't trigger re-renders when you set them. Read about refs in [Referencing Values with Refs.](/learn/referencing-values-with-refs)
+Sebbene la manipolazione del DOM sia il caso d'uso più comune per i ref, l'Hook `useRef` può essere usato per memorizzare altre cose al di fuori di React, come ID di timer. Similmente allo stato, i ref rimangono tra i rendering. I ref sono come variabili di stato che non attivano ri-rendering quando le imposti. Leggi sui ref in [Referenziare Valori con Refs.](/learn/referencing-values-with-refs)
 
-### Example: Scrolling to an element {/*example-scrolling-to-an-element*/}
+### Esempio: Scorrere fino a un elemento {/*example-scrolling-to-an-element*/}
 
-You can have more than a single ref in a component. In this example, there is a carousel of three images. Each button centers an image by calling the browser [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) method on the corresponding DOM node:
+Puoi avere più di un singolo ref in un componente. In questo esempio, c'è un carosello di tre immagini. Ogni pulsante centra un'immagine chiamando il metodo del browser [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) sul nodo DOM corrispondente:
 
 <Sandpack>
 
@@ -193,27 +193,27 @@ li {
 
 <DeepDive>
 
-#### How to manage a list of refs using a ref callback {/*how-to-manage-a-list-of-refs-using-a-ref-callback*/}
+#### Come gestire una lista di refs usando una callback ref {/*how-to-manage-a-list-of-refs-using-a-ref-callback*/}
 
-In the above examples, there is a predefined number of refs. However, sometimes you might need a ref to each item in the list, and you don't know how many you will have. Something like this **wouldn't work**:
+Negli esempi precedenti, c'è un numero predefinito di ref. Tuttavia, a volte potresti aver bisogno di un ref per ogni elemento della lista, e non sai quanti ne avrai. Qualcosa del genere **non funzionerebbe**:
 
 ```js
 <ul>
   {items.map((item) => {
-    // Doesn't work!
+    // Non funziona!
     const ref = useRef(null);
     return <li ref={ref} />;
   })}
 </ul>
 ```
 
-This is because **Hooks must only be called at the top-level of your component.** You can't call `useRef` in a loop, in a condition, or inside a `map()` call.
+Questo perché **gli Hooks devono essere chiamati solo al livello superiore del tuo componente.** Non puoi chiamare `useRef` in un loop, in una condizione o all'interno di una chiamata `map()`.
 
-One possible way around this is to get a single ref to their parent element, and then use DOM manipulation methods like [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to "find" the individual child nodes from it. However, this is brittle and can break if your DOM structure changes.
+Un modo possibile per aggirare questo è ottenere un singolo ref al loro elemento genitore, e poi usare metodi di manipolazione del DOM come [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) per "trovare" i singoli nodi figli da esso. Tuttavia, questo è fragile e può rompersi se la struttura del DOM cambia.
 
-Another solution is to **pass a function to the `ref` attribute.** This is called a [`ref` callback.](/reference/react-dom/components/common#ref-callback) React will call your ref callback with the DOM node when it's time to set the ref, and call the cleanup function returned from the callback when it's time to clear it. This lets you maintain your own array or a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), and access any ref by its index or some kind of ID.
+Un'altra soluzione è **passare una funzione all'attributo `ref`.** Questo è chiamato una [`ref` callback.](/reference/react-dom/components/common#ref-callback) React chiamerà la tua callback ref con il nodo DOM quando è il momento di impostare il ref, e chiamerà la funzione di pulizia restituita dalla callback quando è il momento di cancellarlo. Questo ti permette di mantenere il tuo array o una [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), e accedere a qualsiasi ref tramite il suo indice o qualche tipo di ID.
 
-This example shows how you can use this approach to scroll to an arbitrary node in a long list:
+Questo esempio mostra come puoi usare questo approccio per scorrere fino a un nodo arbitrario in una lunga lista:
 
 <Sandpack>
 
@@ -236,7 +236,7 @@ export default function CatFriends() {
 
   function getMap() {
     if (!itemsRef.current) {
-      // Initialize the Map on first usage.
+      // Inizializza la Map al primo utilizzo.
       itemsRef.current = new Map();
     }
     return itemsRef.current;
@@ -322,43 +322,43 @@ li {
 
 </Sandpack>
 
-In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) from item ID to a DOM node. ([Refs can hold any values!](/learn/referencing-values-with-refs)) The [`ref` callback](/reference/react-dom/components/common#ref-callback) on every list item takes care to update the Map:
+In questo esempio, `itemsRef` non contiene un singolo nodo DOM. Invece, contiene una [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) da ID elemento a un nodo DOM. ([I Refs possono contenere qualsiasi valore!](/learn/referencing-values-with-refs)) La [`ref` callback](/reference/react-dom/components/common#ref-callback) su ogni elemento della lista si occupa di aggiornare la Map:
 
 ```js
 <li
   key={cat.id}
   ref={node => {
     const map = getMap();
-    // Add to the Map
+    // Aggiungi alla Map
     map.set(cat, node);
 
     return () => {
-      // Remove from the Map
+      // Rimuovi dalla Map
       map.delete(cat);
     };
   }}
 >
 ```
 
-This lets you read individual DOM nodes from the Map later.
+Questo ti permette di leggere singoli nodi DOM dalla Map successivamente.
 
 <Note>
 
-When Strict Mode is enabled, ref callbacks will run twice in development.
+Quando la Strict Mode è abilitata, le callback ref verranno eseguite due volte in sviluppo.
 
-Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bugs-found-by-re-running-ref-callbacks-in-development) in callback refs.
+Leggi di più su [come questo aiuta a trovare bug](/reference/react/StrictMode#fixing-bugs-found-by-re-running-ref-callbacks-in-development) nelle callback ref.
 
 </Note>
 
 </DeepDive>
 
-## Accessing another component's DOM nodes {/*accessing-another-components-dom-nodes*/}
+## Accedere ai nodi DOM di un altro componente {/*accessing-another-components-dom-nodes*/}
 
 <Pitfall>
-Refs are an escape hatch. Manually manipulating _another_ component's DOM nodes can make your code fragile.
+I refs sono una via di fuga. Manipolare manualmente i nodi DOM di _un altro_ componente può rendere il tuo codice fragile.
 </Pitfall>
 
-You can pass refs from parent component to child components [just like any other prop](/learn/passing-props-to-a-component).
+Puoi passare i refs dal componente genitore ai componenti figli [proprio come qualsiasi altra prop](/learn/passing-props-to-a-component).
 
 ```js {3-4,9}
 import { useRef } from 'react';
@@ -373,9 +373,9 @@ function MyForm() {
 }
 ```
 
-In the above example, a ref is created in the parent component, `MyForm`, and is passed to the child component, `MyInput`. `MyInput` then passes the ref to `<input>`. Because `<input>` is a [built-in component](/reference/react-dom/components/common) React sets the `.current` property of the ref to the `<input>` DOM element.
+Nell'esempio sopra, un ref viene creato nel componente genitore, `MyForm`, e viene passato al componente figlio, `MyInput`. `MyInput` poi passa il ref a `<input>`. Poiché `<input>` è un [componente integrato](/reference/react-dom/components/common) React imposta la proprietà `.current` del ref all'elemento DOM `<input>`.
 
-The `inputRef` created in `MyForm` now points to the `<input>` DOM element returned by `MyInput`. A click handler created in `MyForm` can access `inputRef` and call `focus()` to set the focus on `<input>`.
+L'`inputRef` creato in `MyForm` ora punta all'elemento DOM `<input>` restituito da `MyInput`. Un gestore di clic creato in `MyForm` può accedere a `inputRef` e chiamare `focus()` per impostare il focus su `<input>`.
 
 <Sandpack>
 
@@ -397,7 +397,7 @@ export default function MyForm() {
     <>
       <MyInput ref={inputRef} />
       <button onClick={handleClick}>
-        Focus the input
+        Metti a fuoco l'input
       </button>
     </>
   );
@@ -408,9 +408,9 @@ export default function MyForm() {
 
 <DeepDive>
 
-#### Exposing a subset of the API with an imperative handle {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}
+#### Esporre un sottoinsieme dell'API con un handle imperativo {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}
 
-In the above example, the ref passed to `MyInput` is passed on to the original DOM input element. This lets the parent component call `focus()` on it. However, this also lets the parent component do something else--for example, change its CSS styles. In uncommon cases, you may want to restrict the exposed functionality. You can do that with [`useImperativeHandle`](/reference/react/useImperativeHandle):
+Nell'esempio sopra, il ref passato a `MyInput` viene passato all'elemento input DOM originale. Questo permette al componente genitore di chiamare `focus()` su di esso. Tuttavia, questo permette anche al componente genitore di fare qualcos'altro--per esempio, cambiare i suoi stili CSS. In casi non comuni, potresti voler limitare la funzionalità esposta. Puoi farlo con [`useImperativeHandle`](/reference/react/useImperativeHandle):
 
 <Sandpack>
 
@@ -420,7 +420,7 @@ import { useRef, useImperativeHandle } from "react";
 function MyInput({ ref }) {
   const realInputRef = useRef(null);
   useImperativeHandle(ref, () => ({
-    // Only expose focus and nothing else
+    // Esponi solo focus e nient'altro
     focus() {
       realInputRef.current.focus();
     },
@@ -438,7 +438,7 @@ export default function Form() {
   return (
     <>
       <MyInput ref={inputRef} />
-      <button onClick={handleClick}>Focus the input</button>
+      <button onClick={handleClick}>Metti a fuoco l'input</button>
     </>
   );
 }
@@ -446,28 +446,28 @@ export default function Form() {
 
 </Sandpack>
 
-Here, `realInputRef` inside `MyInput` holds the actual input DOM node. However, [`useImperativeHandle`](/reference/react/useImperativeHandle) instructs React to provide your own special object as the value of a ref to the parent component. So `inputRef.current` inside the `Form` component will only have the `focus` method. In this case, the ref "handle" is not the DOM node, but the custom object you create inside [`useImperativeHandle`](/reference/react/useImperativeHandle) call.
+Qui, `realInputRef` all'interno di `MyInput` contiene il nodo DOM input effettivo. Tuttavia, [`useImperativeHandle`](/reference/react/useImperativeHandle) istruisce React a fornire il tuo oggetto speciale come valore di un ref al componente genitore. Quindi `inputRef.current` all'interno del componente `Form` avrà solo il metodo `focus`. In questo caso, l'"handle" del ref non è il nodo DOM, ma l'oggetto personalizzato che crei all'interno della chiamata [`useImperativeHandle`](/reference/react/useImperativeHandle).
 
 </DeepDive>
 
-## When React attaches the refs {/*when-react-attaches-the-refs*/}
+## Quando React collega i refs {/*when-react-attaches-the-refs*/}
 
-In React, every update is split in [two phases](/learn/render-and-commit#step-3-react-commits-changes-to-the-dom):
+In React, ogni aggiornamento è diviso in [due fasi](/learn/render-and-commit#step-3-react-commits-changes-to-the-dom):
 
-* During **render,** React calls your components to figure out what should be on the screen.
-* During **commit,** React applies changes to the DOM.
+* Durante il **rendering,** React chiama i tuoi componenti per capire cosa dovrebbe essere sullo schermo.
+* Durante il **commit,** React applica i cambiamenti al DOM.
 
-In general, you [don't want](/learn/referencing-values-with-refs#best-practices-for-refs) to access refs during rendering. That goes for refs holding DOM nodes as well. During the first render, the DOM nodes have not yet been created, so `ref.current` will be `null`. And during the rendering of updates, the DOM nodes haven't been updated yet. So it's too early to read them.
+In generale, [non vuoi](/learn/referencing-values-with-refs#best-practices-for-refs) accedere ai refs durante il rendering. Questo vale anche per i refs che contengono nodi DOM. Durante il primo rendering, i nodi DOM non sono ancora stati creati, quindi `ref.current` sarà `null`. E durante il rendering degli aggiornamenti, i nodi DOM non sono ancora stati aggiornati. Quindi è troppo presto per leggerli.
 
-React sets `ref.current` during the commit. Before updating the DOM, React sets the affected `ref.current` values to `null`. After updating the DOM, React immediately sets them to the corresponding DOM nodes.
+React imposta `ref.current` durante il commit. Prima di aggiornare il DOM, React imposta i valori `ref.current` interessati a `null`. Dopo aver aggiornato il DOM, React li imposta immediatamente ai nodi DOM corrispondenti.
 
-**Usually, you will access refs from event handlers.** If you want to do something with a ref, but there is no particular event to do it in, you might need an Effect. We will discuss Effects on the next pages.
+**Di solito, accederai ai refs dai gestori di eventi.** Se vuoi fare qualcosa con un ref, ma non c'è un evento particolare per farlo, potresti aver bisogno di un Effect. Discuteremo degli Effects nelle prossime pagine.
 
 <DeepDive>
 
-#### Flushing state updates synchronously with flushSync {/*flushing-state-updates-synchronously-with-flush-sync*/}
+#### Svuotare gli aggiornamenti di stato in modo sincrono con flushSync {/*flushing-state-updates-synchronously-with-flush-sync*/}
 
-Consider code like this, which adds a new todo and scrolls the screen down to the last child of the list. Notice how, for some reason, it always scrolls to the todo that was *just before* the last added one:
+Considera un codice come questo, che aggiunge un nuovo todo e scorre la schermata fino all'ultimo figlio della lista. Nota come, per qualche motivo, scorre sempre al todo che era *appena prima* dell'ultimo aggiunto:
 
 <Sandpack>
 
@@ -494,7 +494,7 @@ export default function TodoList() {
   return (
     <>
       <button onClick={handleAdd}>
-        Add
+        Aggiungi
       </button>
       <input
         value={text}
@@ -521,16 +521,16 @@ for (let i = 0; i < 20; i++) {
 
 </Sandpack>
 
-The issue is with these two lines:
+Il problema è con queste due righe:
 
 ```js
 setTodos([ ...todos, newTodo]);
 listRef.current.lastChild.scrollIntoView();
 ```
 
-In React, [state updates are queued.](/learn/queueing-a-series-of-state-updates) Usually, this is what you want. However, here it causes a problem because `setTodos` does not immediately update the DOM. So the time you scroll the list to its last element, the todo has not yet been added. This is why scrolling always "lags behind" by one item.
+In React, [gli aggiornamenti di stato sono messi in coda.](/learn/queueing-a-series-of-state-updates) Di solito, questo è ciò che vuoi. Tuttavia, qui causa un problema perché `setTodos` non aggiorna immediatamente il DOM. Quindi nel momento in cui scorri la lista al suo ultimo elemento, il todo non è ancora stato aggiunto. Ecco perché lo scorrimento è sempre "indietro" di un elemento.
 
-To fix this issue, you can force React to update ("flush") the DOM synchronously. To do this, import `flushSync` from `react-dom` and **wrap the state update** into a `flushSync` call:
+Per risolvere questo problema, puoi forzare React ad aggiornare ("svuotare") il DOM in modo sincrono. Per farlo, importa `flushSync` da `react-dom` e **avvolgi l'aggiornamento di stato** in una chiamata `flushSync`:
 
 ```js
 flushSync(() => {
@@ -539,7 +539,7 @@ flushSync(() => {
 listRef.current.lastChild.scrollIntoView();
 ```
 
-This will instruct React to update the DOM synchronously right after the code wrapped in `flushSync` executes. As a result, the last todo will already be in the DOM by the time you try to scroll to it:
+Questo istruirà React ad aggiornare il DOM in modo sincrono subito dopo che il codice avvolto in `flushSync` viene eseguito. Di conseguenza, l'ultimo todo sarà già nel DOM nel momento in cui provi a scorrere fino ad esso:
 
 <Sandpack>
 
@@ -569,7 +569,7 @@ export default function TodoList() {
   return (
     <>
       <button onClick={handleAdd}>
-        Add
+        Aggiungi
       </button>
       <input
         value={text}
@@ -598,15 +598,15 @@ for (let i = 0; i < 20; i++) {
 
 </DeepDive>
 
-## Best practices for DOM manipulation with refs {/*best-practices-for-dom-manipulation-with-refs*/}
+## Migliori pratiche per la manipolazione del DOM con i refs {/*best-practices-for-dom-manipulation-with-refs*/}
 
-Refs are an escape hatch. You should only use them when you have to "step outside React". Common examples of this include managing focus, scroll position, or calling browser APIs that React does not expose.
+I refs sono una via di fuga. Dovresti usarli solo quando devi "uscire da React". Esempi comuni di questo includono la gestione del focus, la posizione di scorrimento o la chiamata ad API del browser che React non espone.
 
-If you stick to non-destructive actions like focusing and scrolling, you shouldn't encounter any problems. However, if you try to **modify** the DOM manually, you can risk conflicting with the changes React is making.
+Se ti attieni ad azioni non distruttive come il focus e lo scorrimento, non dovresti incontrare problemi. Tuttavia, se provi a **modificare** il DOM manualmente, puoi rischiare di entrare in conflitto con i cambiamenti che React sta facendo.
 
-To illustrate this problem, this example includes a welcome message and two buttons. The first button toggles its presence using [conditional rendering](/learn/conditional-rendering) and [state](/learn/state-a-components-memory), as you would usually do in React. The second button uses the [`remove()` DOM API](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) to forcefully remove it from the DOM outside of React's control.
+Per illustrare questo problema, questo esempio include un messaggio di benvenuto e due pulsanti. Il primo pulsante attiva la sua presenza usando il [rendering condizionale](/learn/conditional-rendering) e lo [stato](/learn/state-a-components-memory), come faresti normalmente in React. Il secondo pulsante usa l'[API DOM `remove()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) per rimuoverlo forzatamente dal DOM al di fuori del controllo di React.
 
-Try pressing "Toggle with setState" a few times. The message should disappear and appear again. Then press "Remove from the DOM". This will forcefully remove it. Finally, press "Toggle with setState":
+Prova a premere "Attiva con setState" alcune volte. Il messaggio dovrebbe scomparire e apparire di nuovo. Poi premi "Rimuovi dal DOM". Questo lo rimuoverà forzatamente. Infine, premi "Attiva con setState":
 
 <Sandpack>
 
@@ -623,15 +623,15 @@ export default function Counter() {
         onClick={() => {
           setShow(!show);
         }}>
-        Toggle with setState
+        Attiva con setState
       </button>
       <button
         onClick={() => {
           ref.current.remove();
         }}>
-        Remove from the DOM
+        Rimuovi dal DOM
       </button>
-      {show && <p ref={ref}>Hello world</p>}
+      {show && <p ref={ref}>Ciao mondo</p>}
     </div>
   );
 }
@@ -647,20 +647,20 @@ button {
 
 </Sandpack>
 
-After you've manually removed the DOM element, trying to use `setState` to show it again will lead to a crash. This is because you've changed the DOM, and React doesn't know how to continue managing it correctly.
+Dopo aver rimosso manualmente l'elemento DOM, provare a usare `setState` per mostrarlo di nuovo porterà a un crash. Questo perché hai cambiato il DOM, e React non sa come continuare a gestirlo correttamente.
 
-**Avoid changing DOM nodes managed by React.** Modifying, adding children to, or removing children from elements that are managed by React can lead to inconsistent visual results or crashes like above.
+**Evita di cambiare i nodi DOM gestiti da React.** Modificare, aggiungere figli a o rimuovere figli da elementi che sono gestiti da React può portare a risultati visivi inconsistenti o crash come sopra.
 
-However, this doesn't mean that you can't do it at all. It requires caution. **You can safely modify parts of the DOM that React has _no reason_ to update.** For example, if some `<div>` is always empty in the JSX, React won't have a reason to touch its children list. Therefore, it is safe to manually add or remove elements there.
+Tuttavia, questo non significa che non puoi farlo affatto. Richiede cautela. **Puoi modificare in sicurezza parti del DOM che React non ha _alcun motivo_ di aggiornare.** Per esempio, se qualche `<div>` è sempre vuoto nel JSX, React non avrà un motivo per toccare la sua lista di figli. Pertanto, è sicuro aggiungere o rimuovere elementi manualmente lì.
 
 <Recap>
 
-- Refs are a generic concept, but most often you'll use them to hold DOM elements.
-- You instruct React to put a DOM node into `myRef.current` by passing `<div ref={myRef}>`.
-- Usually, you will use refs for non-destructive actions like focusing, scrolling, or measuring DOM elements.
-- A component doesn't expose its DOM nodes by default. You can opt into exposing a DOM node by using the `ref` prop.
-- Avoid changing DOM nodes managed by React.
-- If you do modify DOM nodes managed by React, modify parts that React has no reason to update.
+- I refs sono un concetto generico, ma più spesso li userai per contenere elementi DOM.
+- Istruisci React a mettere un nodo DOM in `myRef.current` passando `<div ref={myRef}>`.
+- Di solito, userai i refs per azioni non distruttive come il focus, lo scorrimento o la misurazione degli elementi DOM.
+- Un componente non espone i suoi nodi DOM per default. Puoi scegliere di esporre un nodo DOM usando la prop `ref`.
+- Evita di cambiare i nodi DOM gestiti da React.
+- Se modifichi i nodi DOM gestiti da React, modifica le parti che React non ha motivo di aggiornare.
 
 </Recap>
 
@@ -668,9 +668,9 @@ However, this doesn't mean that you can't do it at all. It requires caution. **Y
 
 <Challenges>
 
-#### Play and pause the video {/*play-and-pause-the-video*/}
+#### Avviare e mettere in pausa il video {/*play-and-pause-the-video*/}
 
-In this example, the button toggles a state variable to switch between a playing and a paused state. However, in order to actually play or pause the video, toggling state is not enough. You also need to call [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) and [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) on the DOM element for the `<video>`. Add a ref to it, and make the button work.
+In questo esempio, il pulsante attiva una variabile di stato per passare tra uno stato di riproduzione e uno stato di pausa. Tuttavia, per effettivamente avviare o mettere in pausa il video, attivare lo stato non è sufficiente. Devi anche chiamare [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) e [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) sull'elemento DOM per il `<video>`. Aggiungi un ref ad esso e fai funzionare il pulsante.
 
 <Sandpack>
 
@@ -688,7 +688,7 @@ export default function VideoPlayer() {
   return (
     <>
       <button onClick={handleClick}>
-        {isPlaying ? 'Pause' : 'Play'}
+        {isPlaying ? 'Pausa' : 'Avvia'}
       </button>
       <video width="250">
         <source
@@ -707,11 +707,11 @@ button { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-For an extra challenge, keep the "Play" button in sync with whether the video is playing even if the user right-clicks the video and plays it using the built-in browser media controls. You might want to listen to `onPlay` and `onPause` on the video to do that.
+Per una sfida extra, mantieni il pulsante "Avvia" sincronizzato con il fatto che il video stia riproducendo o meno anche se l'utente fa clic destro sul video e lo riproduce usando i controlli media integrati del browser. Potresti voler ascoltare `onPlay` e `onPause` sul video per farlo.
 
 <Solution>
 
-Declare a ref and put it on the `<video>` element. Then call `ref.current.play()` and `ref.current.pause()` in the event handler depending on the next state.
+Dichiara un ref e mettilo sull'elemento `<video>`. Poi chiama `ref.current.play()` e `ref.current.pause()` nel gestore di eventi a seconda del prossimo stato.
 
 <Sandpack>
 
@@ -736,7 +736,7 @@ export default function VideoPlayer() {
   return (
     <>
       <button onClick={handleClick}>
-        {isPlaying ? 'Pause' : 'Play'}
+        {isPlaying ? 'Pausa' : 'Avvia'}
       </button>
       <video
         width="250"
@@ -760,13 +760,13 @@ button { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-In order to handle the built-in browser controls, you can add `onPlay` and `onPause` handlers to the `<video>` element and call `setIsPlaying` from them. This way, if the user plays the video using the browser controls, the state will adjust accordingly.
+Per gestire i controlli integrati del browser, puoi aggiungere i gestori `onPlay` e `onPause` all'elemento `<video>` e chiamare `setIsPlaying` da essi. In questo modo, se l'utente riproduce il video usando i controlli del browser, lo stato si adatterà di conseguenza.
 
 </Solution>
 
-#### Focus the search field {/*focus-the-search-field*/}
+#### Mettere a fuoco il campo di ricerca {/*focus-the-search-field*/}
 
-Make it so that clicking the "Search" button puts focus into the field.
+Fai in modo che cliccando il pulsante "Cerca" metta a fuoco il campo.
 
 <Sandpack>
 
@@ -775,10 +775,10 @@ export default function Page() {
   return (
     <>
       <nav>
-        <button>Search</button>
+        <button>Cerca</button>
       </nav>
       <input
-        placeholder="Looking for something?"
+        placeholder="Stai cercando qualcosa?"
       />
     </>
   );
@@ -793,7 +793,7 @@ button { display: block; margin-bottom: 10px; }
 
 <Solution>
 
-Add a ref to the input, and call `focus()` on the DOM node to focus it:
+Aggiungi un ref all'input e chiama `focus()` sul nodo DOM per metterlo a fuoco:
 
 <Sandpack>
 
@@ -808,12 +808,12 @@ export default function Page() {
         <button onClick={() => {
           inputRef.current.focus();
         }}>
-          Search
+          Cerca
         </button>
       </nav>
       <input
         ref={inputRef}
-        placeholder="Looking for something?"
+        placeholder="Stai cercando qualcosa?"
       />
     </>
   );
@@ -828,9 +828,9 @@ button { display: block; margin-bottom: 10px; }
 
 </Solution>
 
-#### Scrolling an image carousel {/*scrolling-an-image-carousel*/}
+#### Scorrere un carosello di immagini {/*scrolling-an-image-carousel*/}
 
-This image carousel has a "Next" button that switches the active image. Make the gallery scroll horizontally to the active image on click. You will want to call [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) on the DOM node of the active image:
+Questo carosello di immagini ha un pulsante "Successivo" che cambia l'immagine attiva. Fai in modo che la galleria scorra orizzontalmente all'immagine attiva al clic. Vorrai chiamare [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) sul nodo DOM dell'immagine attiva:
 
 ```js
 node.scrollIntoView({
@@ -842,7 +842,7 @@ node.scrollIntoView({
 
 <Hint>
 
-You don't need to have a ref to every image for this exercise. It should be enough to have a ref to the currently active image, or to the list itself. Use `flushSync` to ensure the DOM is updated *before* you scroll.
+Non hai bisogno di avere un ref per ogni immagine per questo esercizio. Dovrebbe essere sufficiente avere un ref all'immagine attualmente attiva, o alla lista stessa. Usa `flushSync` per assicurarti che il DOM sia aggiornato *prima* di scorrere.
 
 </Hint>
 
@@ -863,7 +863,7 @@ export default function CatFriends() {
             setIndex(0);
           }
         }}>
-          Next
+          Successivo
         </button>
       </nav>
       <div>
@@ -877,7 +877,7 @@ export default function CatFriends() {
                     ''
                 }
                 src={cat.imageUrl}
-                alt={'Cat #' + cat.id}
+                alt={'Gatto #' + cat.id}
               />
             </li>
           ))}
@@ -955,15 +955,15 @@ img {
 
 <Solution>
 
-You can declare a `selectedRef`, and then pass it conditionally only to the current image:
+Puoi dichiarare un `selectedRef`, e poi passarlo condizionalmente solo all'immagine corrente:
 
 ```js
 <li ref={index === i ? selectedRef : null}>
 ```
 
-When `index === i`, meaning that the image is the selected one, the `<li>` will receive the `selectedRef`. React will make sure that `selectedRef.current` always points at the correct DOM node.
+Quando `index === i`, il che significa che l'immagine è quella selezionata, il `<li>` riceverà il `selectedRef`. React si assicurerà che `selectedRef.current` punti sempre al nodo DOM corretto.
 
-Note that the `flushSync` call is necessary to force React to update the DOM before the scroll. Otherwise, `selectedRef.current` would always point at the previously selected item.
+Nota che la chiamata `flushSync` è necessaria per forzare React ad aggiornare il DOM prima dello scorrimento. Altrimenti, `selectedRef.current` punterebbe sempre all'elemento precedentemente selezionato.
 
 <Sandpack>
 
@@ -992,7 +992,7 @@ export default function CatFriends() {
             inline: 'center'
           });
         }}>
-          Next
+          Successivo
         </button>
       </nav>
       <div>
@@ -1012,7 +1012,7 @@ export default function CatFriends() {
                     : ''
                 }
                 src={cat.imageUrl}
-                alt={'Cat #' + cat.id}
+                alt={'Gatto #' + cat.id}
               />
             </li>
           ))}
@@ -1090,13 +1090,13 @@ img {
 
 </Solution>
 
-#### Focus the search field with separate components {/*focus-the-search-field-with-separate-components*/}
+#### Mettere a fuoco il campo di ricerca con componenti separati {/*focus-the-search-field-with-separate-components*/}
 
-Make it so that clicking the "Search" button puts focus into the field. Note that each component is defined in a separate file and shouldn't be moved out of it. How do you connect them together?
+Fai in modo che cliccando il pulsante "Cerca" metta a fuoco il campo. Nota che ogni componente è definito in un file separato e non dovrebbe essere spostato da esso. Come li colleghi insieme?
 
 <Hint>
 
-You'll need to pass `ref` as a prop to opt into exposing a DOM node from your own component like `SearchInput`.
+Avrai bisogno di passare `ref` come una prop per scegliere di esporre un nodo DOM dal tuo componente come `SearchInput`.
 
 </Hint>
 
@@ -1122,7 +1122,7 @@ export default function Page() {
 export default function SearchButton() {
   return (
     <button>
-      Search
+      Cerca
     </button>
   );
 }
@@ -1132,7 +1132,7 @@ export default function SearchButton() {
 export default function SearchInput() {
   return (
     <input
-      placeholder="Looking for something?"
+      placeholder="Stai cercando qualcosa?"
     />
   );
 }
@@ -1146,7 +1146,7 @@ button { display: block; margin-bottom: 10px; }
 
 <Solution>
 
-You'll need to add an `onClick` prop to the `SearchButton`, and make the `SearchButton` pass it down to the browser `<button>`. You'll also pass a ref down to `<SearchInput>`, which will forward it to the real `<input>` and populate it. Finally, in the click handler, you'll call `focus` on the DOM node stored inside that ref.
+Dovrai aggiungere una prop `onClick` a `SearchButton`, e far sì che `SearchButton` la passi al `<button>` del browser. Passerai anche un ref a `<SearchInput>`, che lo inoltrerà al vero `<input>` e lo popolerà. Infine, nel gestore del clic, chiamerai `focus` sul nodo DOM memorizzato all'interno di quel ref.
 
 <Sandpack>
 
@@ -1174,7 +1174,7 @@ export default function Page() {
 export default function SearchButton({ onClick }) {
   return (
     <button onClick={onClick}>
-      Search
+      Cerca
     </button>
   );
 }
@@ -1185,7 +1185,7 @@ export default function SearchInput({ ref }) {
   return (
     <input
       ref={ref}
-      placeholder="Looking for something?"
+      placeholder="Stai cercando qualcosa?"
     />
   );
 }