Quando si usano Component basati sulle funzioni, in passato si avevano delle difficoltà, rispetto ai Component basati sulle classi. Ad esempio, le variabili contenute nelle funzioni hanno vita breve e non sono statiche. In tali casi diventa difficile fare anche un semplice contatore, questo perchè il contatore si azzera ogni volta che si richiama la funzione. Per questo motivo i component basati su funzioni venivano chiamati stateless component. Oggi non è più così grazie agli hooks, come State hooks. Altri hooks disponibili in React sono:
- State Hooks
- Context Hooks
- Ref Hooks
- Effect Hooks
- Performance Hooks
- Other Hooks
- Personalizzazione degli Hooks
Prima di tutto cerchiamo di dare un senso alla parola ‘hook’, che letteralmente significa: uncino, oppure gancio.
Gli hook sono funzioni speciali (use…) che sono disponibili per facilitare la vita al programmatore, fornendo dei meccanismi o dei pattern d’uso, o soluzioni riutilizzabili. Queste funzioni speciali permettono di connettersi (hook into) ad altre funzionalità di React.
Per usare il primo Hook (per lo stato), si devono eseguire quattro passi:
- importare la funzione con l’istruzione
import {useState} from 'react';
- inizializzare immediatamente (dentro il componente) lo stato
vare la funzione settersetVarcon l’istruzione (assegnazione destrutturata)const [var, setVar] = useState("pippo");
- definire un nome diverso per la funzione setter
function funzioneSetter() { setVar("pluto"); // ... };
- passare la nuova
funzioneSetteral component figlio (come props)- eventualmente associarla ad un evento (onPress o altro)
Ricordiamo che grazie all’inizializzazione (fatta una sola volta con useState ) si ottengono due benefici:
- variabile di stato permanente
- innesco automatico del rendering (al bisogno)
Fino ad ora si è parlato di Component basati su funzioni. Nei Component basati su classi non vi è la necessita di usare hooks in quanto le variabili statiche ‘state‘ e le funzioni ‘setState‘ possono essere create dal programmatore.