I React Hooks e il Context hanno rivoluzionato l'approccio alla gestione dello stato e alla condivisione dei dati nelle applicazioni React. Con l'introduzione degli hooks nella versione 16.8 nel 2019, gli sviluppatori hanno acquisito la possibilità di utilizzare lo stato e i metodi del ciclo di vita all'interno dei componenti funzionali, ottenendo così codice più conciso e leggibile.

Il Context, invece, offre un metodo semplificato per condividere dati tra componenti senza il ricorso al prop drilling. Verrà analizzata la sinergia tra React hooks e Context, evidenziando il loro potenziale combinato nel semplificare la gestione di stati complessi e nel facilitare un flusso di dati uniforme attraverso l'albero dei componenti.

Nei prossimi capitoli, esamineremo in dettaglio quanto segue:

Hook di stato

useState consente a un componente di conservare e richiamare informazioni (ad esempio, input dell'utente). Ad esempio, un componente form può utilizzare lo stato per mantenere il valore dell'input, mentre un componente galleria di immagini può fare affidamento sullo stato per tenere traccia dell'indice dell'immagine selezionata.

function Form() {
  const [value, setValue] = useState('');
  // ...
}

Hook ref

useRef fornisce un mezzo per un componente di conservare informazioni che non influiscono sul rendering, come un nodo DOM o un ID di timeout. A differenza dello stato, la modifica di una ref non attiva un nuovo rendering del componente. Le ref rappresentano una "scappatoia" dal paradigma tipico di React e risultano utili quando si interagisce con sistemi non React, come le API native del browser.

function Form() {
  const inputRef = useRef(null);
  // ...
}

Hook Effect

useEffect consente a un componente di stabilire connessioni e sincronizzarsi con sistemi esterni, inclusa l'interazione con reti, la manipolazione del DOM del browser, la gestione di animazioni, l'integrazione di widget sviluppati con diverse librerie UI e l'incorporamento di codice non-React in modo fluido.

function Animation({ animationId }) {
  useEffect(() => {
    const animation = createAnimation(animationId);
    animation.start();
    
    // Cleaning up the animation when the component unmounts
    return () => animation.stop();
  }, [animationId]);
  // ...
}

Hook Memo

useMemo migliora le prestazioni di rendering riducendo i calcoli non necessari. Ad esempio, è possibile istruire React a riutilizzare un calcolo memorizzato nella cache o evitare un nuovo rendering se i dati non sono cambiati rispetto al rendering precedente.

function NewspaperList({ data, filter }) {
  const filteredData = useMemo(
    () => performFiltering(data, filter),
    [data, filter]
  );
  // ...
}

Hook Context

useContext permette a un componente di accedere alle informazioni da genitori distanti senza passare le props. Consente al componente di livello superiore dell'app di trasmettere senza soluzione di continuità il tema UI corrente a tutti i componenti discendenti, indipendentemente dalla loro profondità nell'albero dei componenti.

function Section() {
  const theme = useContext(ThemeContext);
  // ...
}