{"id":70446,"date":"2023-06-22T08:57:20","date_gmt":"2023-06-22T07:57:20","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=70446&post_type=knowledgebase&preview_id=70446"},"modified":"2025-10-01T20:43:20","modified_gmt":"2025-10-01T19:43:20","slug":"react-useeffect","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/react-useeffect\/","title":{"rendered":"Utilizzare al meglio l\u2019Hook useEffect di React"},"content":{"rendered":"

React<\/a> \u00e8 una delle librerie JavaScript<\/a> pi\u00f9 popolari per la creazione di interfacce utente. Spesso, nella creazione delle interfacce, potrebbe essere necessario eseguire effetti collaterali, come recuperare dati da un’API<\/a>, rimanere in attesa di eventi o manipolare il DOM.<\/p>\n

\u00c8 qui che torna utile useEffect<\/code>, un hook di React che permette di gestire queste operazioni in modo dichiarativo ed efficiente, garantendo che l’interfaccia utente rimanga reattiva e aggiornata.<\/p>\n

Comprendere il funzionamento di useEffect<\/code> \u00e8 essenziale per creare applicazioni robuste e dinamiche, tanto per chi \u00e8 alle prime armi quanto per sviluppatori<\/a> pi\u00f9 esperti in React. In questo articolo spiegheremo come funziona l’hook useEffect<\/code> e come usarlo nei progetti React.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

Cos’\u00e8 un effetto collaterale in React?<\/h2>\n

Quando si lavora con i componenti di React, a volte \u00e8 necessario interagire con entit\u00e0 o eseguire azioni al di fuori dell’ambito di React. Queste interazioni esterne sono note come effetti collaterali<\/strong>, o pi\u00f9 brevemente effetti<\/strong>.<\/p>\n

In React, la maggior parte dei componenti sono funzioni pure, cio\u00e8 ricevono input (props) e producono output prevedibili (JSX), come si vede nell’esempio che segue:<\/p>\n

export default function App() {\n  return <User userName=\"JaneDoe\" \/>   \n}\n \nfunction User(props) {\n  return <h1>{props.userName}<\/h1>; \/\/ John Doe\n}<\/code><\/pre>\n
Tuttavia, gli effetti collaterali non sono prevedibili perch\u00e9 coinvolgono interazioni al di fuori dell’ambito abituale di React.<\/p>\n
Si pensi al caso in cui si desidera cambiare dinamicamente il titolo della scheda del browser per visualizzare il sito userName<\/code> dell’utente. Anche se potrebbe essere allettante farlo direttamente all’interno del componente, non \u00e8 l’approccio consigliato perch\u00e9 \u00e8 considerato un effetto collaterale:<\/p>\n
const User = ({ userName }) => {\n  document.title = `Hello ${userName}`; \/\/ \u274c Non fatelo mai nel corpo del componente: \u00e8 un effetto collaterale.\n\n  return <h1>{userName}<\/h1>;\n}<\/code><\/pre>\n
Eseguire effetti collaterali direttamente nel corpo del componente pu\u00f2 interferire con il processo di rendering del componente React.<\/p>\n
Per evitare interferenze, \u00e8 bene separare gli effetti collaterali in modo che vengano eseguiti o funzionino solo dopo il rendering del componente, assicurando una chiara separazione tra il processo di rendering e le interazioni esterne necessarie. Questa separazione avviene con l’hook useEffect<\/code>.<\/p>\n
Le basi di useEffect<\/h2>\n
L\u2019hook useEffect<\/code> \u00e8 progettato per imitare i metodi del ciclo di vita come componentDidMount<\/code>, componentDidUpdate<\/code> e componentWillUnmount<\/code> presenti nei componenti di classe.<\/p>\n
Prima di utilizzare useEffect<\/code>, bisogna importarlo da “react” e poi invocarlo all’interno di un componente<\/a> funzionale (al livello superiore del componente). Richiede due argomenti: una funzione di callback e un array opzionale di dipendenze.<\/p>\n
useEffect(callbackFn, [dependencies]);<\/code><\/pre>\n
Questo pu\u00f2 essere scritto meglio come:<\/p>\n
useEffect(() => {\n  \/\/ codice da eseguire quando \u00e8 attivato l'effetto\n}, [dependencies]);<\/code><\/pre>\n