State Hooks

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
  • (aiuta ad avere uno stato, con rendering)
• Context Hooks
  • (aiuta a propagare uno stato a molti component)
• Ref Hooks
  • (uno stato che non richiede rendering)
• Effect Hooks
  • (un evento esterno, con rendering e callback)
• 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 (come useState()) 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 di aiuto con l’istruzione
  • import {useState} from 'react';
• inizializzare immediatamente le variabili permanenti (dentro il componente), come lo stato vars e la funzione setter setVars() con l’istruzione (assegnazione destrutturata di un array)
  • const [vars, setVars] = useState("pippo");
• definire un nome per la funzione setter
  • function funzioneSetter() { setVars("pluto"); // ... };
• passare la nuova funzioneSetter al component figlio (come props) in modo che possa usarla per cambiare la variabile permanente vars
  • 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, come ‘state‘, e le funzioni, come ‘setState‘, possono essere create dal programmatore all’interno della classe.