React: arrivano gli Hooks

Un’importante novità è in arrivo nell’universo targato React: gli Hooks. Si tratta di una feature attualmente in fase di proposta che consente di utilizzare lo state ed altre funzionalità proprie di React senza dover scrivere una classe.

Attualmente, gli Hooks sono presenti nella versione React v16.7.0-alpha ed è stata già aperta una discussione sul topic tra gli sviluppatori. Analizziamo quindi un esempio molto semplice:

import { useState } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

La funzione useState è un Hook. Viene richiamato all’interno di un componente per aggiungere uno state locale. React preserverà questo state tra i re-renders. useState restituisce una coppia: il valore dello state “corrente” ed una funzione che permette di aggiornarlo.

Puoi richiamare questa funzione da un gestore degli eventi o da qualsiasi altro punto consentito. Ciò è in qualche modo similare a this.setState posizionato all’interno di una classe, con la differenza che il primo non fonde il vecchio ed il nuovo stato insieme.

L’unico argomento di useState è lo state iniziale, che nell’esempio precedente è settato a “0” in quanto il contatore dello snippet parte da zero. Notare che, a differenza di this.state, lo state di questo snippet non deve essere necessariamente un oggetto, la scelta sta allo sviluppatore. Il parametro indicativo dello state iniziale viene utilizzato unicamente durante il primo render.

Come dichiarato dal team di sviluppo, gli Hooks non andrebbero a modificare il modo in cui il codice React viene implementato. E’ possibile provare gli Hooks senza riscrivere la codebase attuale e non necessitano di essere utilizzati se lo sviluppatore non lo desidera. Gli Hooks sono inoltre 100% compatibili con le implementazioni precedenti e non presentano “breaking changes”.

Infine, gli Hooks sono tutt’ora in fase di alpha release, con un’implementazione definitiva presumibilmente nella versione 16.7 di React.

Per una panoramica completa sullo state Hook, vi rimando alla dettagliatissima documentazione ufficiale.