Ottieni il massimo dagli hook di React con queste best practice

Se non conosci React, ti starai chiedendo cosa sono i React Hooks e quando dovresti usarli. React ha introdotto gli hook solo nella sua versione 16.8, ma sono diventati rapidamente una caratteristica essenziale della libreria.

Scopri tutto sulle basi di React Hooks e scopri alcune best practice per utilizzarli nelle tue applicazioni React.

Cosa sono i React Hook?

React Hooks ti consente di utilizzare lo stato e altre funzionalità di React senza scrivere codice aggiuntivo. Gli hook sono un ottimo modo per rendere il tuo codice più leggibile e gestibile.

Ci sono alcuni diversi Hook in React, ma i più usati sono useState e useEffect. L'hook useState ti consente di aggiungere lo stato ai tuoi componenti. Questo è utile per cose come tenere traccia dell'input di un utente o delle modifiche a un modulo. L'hook useEffect consente di eseguire una funzione ogni volta che viene eseguito il rendering di un componente. Questo è utile per cose come il recupero di dati da un'API o l'impostazione di un abbonamento.

Quando dovresti usare gli hook React?

Dovresti usare React Hooks ogni volta che devi aggiungere funzionalità extra a un componente. Ad esempio, se hai bisogno di tenere traccia dell'input di un utente, dovresti usare l'hook useState. Se hai bisogno di recuperare dati da un'API, dovresti usare l'hook useEffect. Puoi anche creare hook personalizzati per le chiamate API.

Se hai appena iniziato a utilizzare React, potresti non aver ancora bisogno di utilizzare Hooks. Ma man mano che crei app più complesse, scoprirai che gli hook sono un ottimo modo per aggiungere funzionalità extra ai tuoi componenti.

Migliori pratiche con i ganci React

Ora che sai cosa sono i React Hooks e quando usarli, parliamo di alcune best practice.

1. Chiama solo hook da funzioni React

Dovresti chiamare React Hooks solo dalle funzioni React. Se provi a chiamare gli hook di reazione da un componente di classe, otterrai un errore.

Questo perché puoi chiamare un React Hook solo da una funzione React. Le funzioni di reazione sono componenti dichiarati con una parola chiave function.

Ecco un esempio di un componente della funzione React:

importare Reagisci, { useState } da 'reagire';
funzioneApp() {
cost [count, setCount] = useState(0);
ritorno (
<div>
<P>{contare}</P>
<pulsante al clic={() => setCount (conteggio + 1)}>
 Cliccami
</button>
</div>
 );
}

Ed ecco un esempio di un componente di classe:

importare Reagisci, { Componente } da 'reagire';
classeAppestendeComponente{
 stato = {
 contare: 0
 };
rendere() {
ritorno (
<div>
<P>{questo.stato.conto}</P>
<pulsante al clic={() => this.setState({ conteggio: this.state.count + 1 })}>
 Cliccami
</button>
</div>
 );
 }
}

Il primo esempio dichiara il componente App utilizzando la parola chiave function, mentre il secondo utilizza la parola chiave class.

2. Usa solo un gancio per effetto

Se stai usando l'hook useEffect, dovresti usarne solo uno per componente. Questo perché useEffect viene eseguito ogni volta che viene eseguito il rendering di un componente.

Se hai più hook useEffect, verranno tutti eseguiti ogni volta che viene eseguito il rendering di un componente. Ciò può portare a comportamenti imprevisti e problemi di prestazioni. Nell'esempio seguente, useEffects verrà eseguito ogni volta che viene eseguito il rendering del componente App.

importare Reagire, {useState, useEffect} da 'reagire';
funzioneApp() {
cost [count, setCount] = useState(0);
usaEffetto(() => {
 console.log('Questo verrà eseguito ogni volta che viene eseguito il rendering del componente App!');
 }, []);
usaEffetto(() => {
 console.log('Questo verrà eseguito anche ogni volta che viene eseguito il rendering del componente App!');
 }, []);
ritorno (
<div>
<P>{contare}</P>
<pulsante al clic={() => setCount (conteggio + 1)}>
 Cliccami
</button>
</div>
 );
}

Invece di usare più hook useEffect, puoi usare un singolo hook useEffect e inserire tutto il tuo codice al suo interno. Nell'esempio seguente, verrà eseguito solo un hook useEffect ogni volta che viene eseguito il rendering del componente App.

importare Reagire, {useState, useEffect} da 'reagire';
funzioneApp() {
cost [count, setCount] = useState(0);
usaEffetto(() => {
 console.log('Questo verrà eseguito ogni volta che viene eseguito il rendering del componente App!');
 console.log('Questo verrà eseguito anche ogni volta che viene eseguito il rendering del componente App!');
 }, []);
ritorno (
<div>
<P>{contare}</P>
<pulsante al clic={() => setCount (conteggio + 1)}>
 Cliccami
</button>
</div>
 );
}

Ciò significa che puoi chiamare React Hooks solo dal primo esempio. Se provi a chiamare React Hooks dal secondo esempio, riceverai un errore.

3. Usa i ganci al livello più alto

Una delle migliori pratiche con React Hooks è usarli al massimo livello. Dovresti evitare di usare hook all'interno di cicli, condizioni o funzioni nidificate. Ad esempio, se usiState all'interno di un ciclo for, ogni volta che il ciclo viene eseguito, React creerà una nuova variabile di stato. Questo può portare a comportamenti imprevisti.

importare Reagisci, { useState } da 'reagire';
funzioneApp() {
per (permettere io = 0; io < 10; i++) {
// Non farlo!
cost [count, setCount] = useState(0);
 }
ritorno (
<div>
<P>{contare}</P>
<pulsante al clic={() => setCount (conteggio + 1)}>
 Cliccami
</button>
</div>
 );
}

Nell'esempio precedente, il componente App eseguirà sempre e solo il rendering del conteggio e del pulsante dall'iterazione finale del ciclo. Questo perché React aggiorna solo la variabile di stato dall'ultima iterazione.

Invece di utilizzareState all'interno di un ciclo, è possibile dichiarare una variabile di stato all'esterno del ciclo. In questo modo, React creerà solo una variabile di stato e la aggiornerà di conseguenza.

importare Reagisci, { useState } da 'reagire';
funzioneApp() {
// Questo è il modo corretto di utilizzare useState all'interno di un ciclo
cost [count, setCount] = useState(0);
per (permettere io = 0; io < 10; i++) {
// ...
 }
ritorno (
<div>
<P>{contare}</P>
<pulsante al clic={() => setCount (conteggio + 1)}>
 Cliccami
</button>
</div>
 );
}

4. Non abusare degli hook

I React Hooks sono uno strumento potente, ma dovresti evitare di usarli in modo eccessivo. Se ti ritrovi a utilizzare più Hook in ogni componente, potresti usarli in modo eccessivo.

Gli hook React sono particolarmente utili quando è necessario condividere lo stato tra più componenti. Evita di utilizzare Hook non necessari perché possono rendere difficile la lettura del codice e potrebbero influire sulle prestazioni se utilizzati in modo eccessivo.

Aggiungi più funzionalità utilizzando React 18 Hooks

Con il rilascio di React 18, sono disponibili nuovi hook. Ogni hook è specifico per una determinata funzionalità di React. Puoi trovare un elenco di tutti gli hook disponibili sul sito web di React. Ma gli hook più comunemente usati sono ancora useState e useEffect.