Ottieni il massimo dagli hook React con queste best practice
I React Hooks sono un concetto complicato e può essere difficile sapere come usarli. Segui questi suggerimenti per ottenere il meglio da React.
Se sei nuovo a React, potresti chiederti cosa sono i React Hooks e quando dovresti usarli. React ha introdotto gli hook solo nella versione 16.8, ma sono diventati rapidamente una caratteristica essenziale della libreria.
Scopri tutto sulle nozioni di base dei React Hooks e scopri alcune best practice per utilizzarli nelle tue applicazioni React.
Cosa sono gli hook di reazione?
I React Hooks ti consentono 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.
Esistono alcuni Hook diversi in React, ma i più comunemente usati sono useState e useEffect. L'hook useState ti consente di aggiungere stato ai tuoi componenti. Ciò è utile per cose come tenere traccia dell'input di un utente o delle modifiche a un modulo. L'hook useEffect ti consente di eseguire una funzione ogni volta che viene eseguito il rendering di un componente. Ciò è utile per cose come recuperare dati da un'API o impostare un abbonamento.
Quando dovresti usare i React Hooks?
Dovresti utilizzare React Hooks ogni volta che devi aggiungere funzionalità extra a un componente. Ad esempio, se devi tenere traccia dell'input di un utente, utilizzeresti l'hook useState. Se hai bisogno di recuperare dati da un'API, utilizzeresti 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 gli Hooks. Ma man mano che crei app più complesse, scoprirai che gli Hooks sono un ottimo modo per aggiungere funzionalità extra ai tuoi componenti.
Migliori pratiche con gli hook React
Ora che sai cosa sono i React Hooks e quando usarli, parliamo di alcune best practice.
1. Chiama hook solo dalle funzioni React
Dovresti chiamare React Hooks solo dalle funzioni React. Se provi a chiamare gli hook di reazione da un componente della classe, riceverai un errore.
Questo perché puoi chiamare un React Hook solo da una funzione React. Le funzioni React sono componenti che dichiari con una parola chiave funzione.
Ecco un esempio di un componente della funzione React:
import React, { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}Ed ecco un esempio di un componente di classe:
import React, { Component } from 'react';
class App extends Component {
state = {
count: 0
};
render() {
return (
<div>
<p>{this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}Il primo esempio dichiara il componente App utilizzando la parola chiave function, mentre il secondo utilizza la parola chiave class.
2. Utilizzare solo un gancio useEffect
Se stai utilizzando 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 disponi di più hook useEffect, verranno eseguiti tutti ogni volta che viene eseguito il rendering di un componente. Ciò può portare a comportamenti imprevisti e problemi di prestazioni. Nell'esempio seguente, entrambi useEffects verranno eseguiti ogni volta che viene eseguito il rendering del componente App.
import React, { useState, useEffect } from 'react';
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('This will run whenever the App component renders!');
}, []);
useEffect(() => {
console.log('This will also run whenever the App component renders!');
}, []);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}Invece di utilizzare più hook useEffect, puoi utilizzare un singolo hook useEffect e inserirvi tutto il codice. Nell'esempio seguente, verrà eseguito un solo hook useEffect ogni volta che viene eseguito il rendering del componente App.
import React, { useState, useEffect } from 'react';
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('This will run whenever the App component renders!');
console.log('This will also run whenever the App component renders!');
}, []);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</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 gli Hooks al livello più alto
Una delle migliori pratiche con React Hooks è usarli al livello più alto. Dovresti evitare di utilizzare hook all'interno di cicli, condizioni o funzioni annidate. Ad esempio, se usiState all'interno di un ciclo for, ogni volta che il ciclo viene eseguito, React creerà una nuova variabile di stato. Ciò può portare a comportamenti imprevisti.
import React, { useState } from 'react';
function App() {
for (let i = 0; i < 10; i++) {
// Don't do this!
const [count, setCount] = useState(0);
}
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}Nell'esempio precedente, il componente App eseguirà il rendering solo del conteggio e del pulsante dell'iterazione finale del ciclo. Questo perché React aggiorna solo la variabile di stato dell'ultima iterazione.
Invece di usareState all'interno di un ciclo, puoi dichiarare una variabile di stato all'esterno del ciclo. In questo modo, React creerà solo una variabile di stato e la aggiornerà di conseguenza.
import React, { useState } from 'react';
function App() {
// This is the correct way to use useState inside a loop
const [count, setCount] = useState(0);
for (let i = 0; i < 10; i++) {
// ...
}
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}4. Non abusare degli hook
I React Hooks sono uno strumento potente, ma dovresti evitare di abusarne. Se ti ritrovi a utilizzare più Hook in ogni componente, potresti abusarne.
I React Hooks sono molto 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 gli hook React 18
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.