Gli Hook sono funzioni che consentono di utilizzare le funzionalità dello state e del ciclo di vita presente nei componenti di classe direttamente all’interno dei componenti funzionali.
Ecco come utilizzare gli hook più comuni:
1. useState: E’ un hook chiamato all’interno di un componente funzionale per aggiungere ad esso lo stato (locale).
``` import React, { useState } from ‘react’;
function MyComponent() { const [state, setState] = useState(initialState); return ( …. ); } ```Dove `initialState` rappresenta il valore iniziale dello stato e può essere qualsiasi tipo: numero, stringa, oggetto, array ecc.
1. useEffect: Serve per eseguire delle azioni (effetti) quando il componente è pronto, aggiornato o prima che venga rimosso.
``` import React, { useEffect } from ‘react’;
function MyComponent() { useEffect(() => { // Qui puoi eseguire le azioni desiderate: fetch, operazioni sui DOM, ecc. }, [dependencies]); return ( …. ); } ```Dove `dependencies` è un array di dipendenze: l’effetto verrà eseguito solo quando una delle dipendenze cambia.
1. useContext: Serve per lavorare con il Context API di React, che permette di passare dati a componenti nipoti senza doverli passare prima da tutti i componenti intermedi.
```
import React, { useContext } from ‘react’;
import { MyContext } from ‘./MyContext’;
function MyComponent() { const contextValue = useContext(MyContext);
return ( ….. ); } ```1. useReducer: E’ un’alternativa a useState, accetta un reducer di tipo (stato, azione) => NuovoStato, e restituisce l’attuale stato corrente insieme a una funzione dispatch.
1. useCallback: Si usa per evitare ri-render inutili di componenti con bassa performance.
Credits: Tutto il codice è stato scritto in JSX, un’estensione di JavaScript utilizzata in React. Per eseguire il codice JSX, deve essere convertito in JavaScript regolare utilizzando un transpiler come Babel.
