React Hooks sono delle funzioni introdotte in React 16.8 che consentono di utilizzare lo stato e altre funzionalità di React senza dover scrivere una classe.
Prima di React Hooks, se volevamo gestire lo stato o il ciclo di vita di un componente, dovevamo creare un componente basato su classe. Ora, possiamo fare tutto ciò in un componente funzionale.
Esistono diversi tipi di Hooks in React:
1. `useState`: Questo è probabilmente l’hook più utilizzato. Consente di aggiungere uno stato reattivo a un componente funzionale. Ritorna un array di due elementi: lo stato corrente e una funzione per aggiornare quel stato.
Esempio di utilizzo: `const [count, setCount] = useState(0);`1. `useEffect`: Questo hook può essere pensato come la combinazione di `componentDidMount`, `componentDidUpdate`, e `componentWillUnmount`.
Esempio di utilizzo: \`\`\`javascript useEffect(() => { document.title = `You clicked ${count} times`; }); \`\`\`1. `useContext`: Questo hook consente di accedere al valore del contesto senza dover utilizzare un `Consumer` in un componente ‘render’.
Esempio di utilizzo: `const theme = useContext(ThemeContext);`Per usare questi hooks, devi chiamarli nella parte superiore del tuo componente funzionale. Deve essere rispettata una regola importante: non chiamare gli Hooks all’interno dei cicli, condizioni o funzioni annidate. È possibile utilizzare gli Hooks solo all’interno dei componenti funzionali React o all’interno di Hook personalizzati.
React offre anche la possibilità di creare i tuoi hook personalizzati se hai bisogno di condividere comportamenti logici tra componenti. Questi sono chiamati Custom Hooks. Gli Hook personalizzati sono una combinazione di Hook esistenti che si uniscono per creare una nuova funzionalità.
