Gli hook di react, definizione e tipi

Introduzione agli Hooks

In React, ci sono dei particolari strumenti chiamati “hook” (che in italiano significa “gancio” o “amo”) che consentono di estendere le funzionalità di un componente funzionale. I componenti funzionali rappresentano una modalità di definizione dei componenti React che utilizza la sintassi delle funzioni, anziché quella delle classi.

Gli “hook” sono fondamentali per aggiungere nuove funzionalità ai componenti funzionali, come ad esempio lo stato locale, gli effetti collaterali, la gestione del ciclo di vita, la gestione dei dati, e molte altre ancora. In React esistono molti tipi di “hook” disponibili, tra cui useState, useEffect, useContext, useCallback, useMemo, useRef, useReducer.

Per utilizzare un “hook”, è sufficiente importare la funzione corrispondente dal modulo React e richiamarla all’interno del componente funzionale. In questo modo, si può aggiungere la funzionalità desiderata al componente senza dover scrivere complessi codici da zero.

import React, { useState } from 'react';

Gli Hooks sono disponibili dalla release 16.8 e possono essere importati direttamente dal core di “react” come mostrato dalla direttiva from in alto.

I tipi di hooks

In React esistono molti tipi di “hook” disponibili, tutti introducibili sempre dal pacchetto “react”, eccone alcuni:

• • useState: consente di aggiungere lo stato locale al componente funzionale
  • useEffect: consente di gestire gli effetti collaterali all’interno del componente funzionale
  • useContext: consente di accedere al contesto all’interno del componente funzionale
  • useCallback: consente di memorizzare una funzione in modo che possa essere utilizzata in più renderizzazioni senza essere ricreata
  • useMemo: consente di memorizzare il risultato di una funzione in modo che possa essere riutilizzato in più renderizzazioni senza doverla ricalcolare
  • useRef: consente di creare un riferimento ad un elemento del DOM o ad un valore all’interno del componente funzionale
  • useReducer: consente di gestire lo stato del componente utilizzando un’implementazione di tipo reducer simile a quella utilizzata in Redux