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
var
e la funzione settersetVar
con l’istruzione (assegnazione destrutturata)const [var, setVar] = useState("pippo");
- definire un nome diverso per la funzione setter
function funzioneSetter() { setVar("pluto"); // ... }
;
- passare la nuova
funzioneSetter
al 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.