Cos’è una funzione Hook in React

Una funzione hook (in italiano “gancio”, “amo”) è un componente senza interfaccia. useState è una funzione hook.

Ma se i componenti sono funzioni che restituiscono JSX e una funzione hook è un componente senza interfaccia, allora una funzione hook non restituisce JSX: questo la rende una funzione che non restituisce JSX ..cioè una normale funzione? Sì.

Tutte le funzioni hook sono funzioni, ma non tutte le funzioni sono funzioni hook. Che differenza c’è quindi tra una funzione hook e una normale funzione? Che una funzione hook può, al suo interno, utilizzare altre funzioni hook.

Se useState non fosse una funzione hook, questa cosa non avrebbe nessuna importanza. Il fatto che useState sia una funzione hook cambia tutto, perché useState è sincronizzata con i cicli di rendering di React. Ricordiamoci che React scatena un nuovo ciclo di rendering quando viene chiamata la funzione setter di uno stato.

Quando si usano le funzioni hook? 

Le funzioni hook si usano quando abbiamo a che fare con informazioni che non vogliamo rappresentare in termini di JSX, o quando non possiamo farlo. Per avere infiniti esempi, puoi continuare a seguire questa guida, oppure spulciare questa raccolta di hooks.

L’unica regola per definire una funzione hook è che il nome della funzione deve cominciare con use (per esempio, appunto, useState).