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
• 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 setter setVar 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.