L'hook useEffect consente di sincronizzare il componente con fattori o servizi esterni, inclusi il recupero di dati, le sottoscrizioni, le modifiche manuali, ecc.

Sintassi:

Il primo argomento (setup) è una funzione freccia che verrà eseguita dopo ogni render. Il secondo argomento (dependencies) è un array opzionale di dipendenze. Se vengono fornite le dependencies, l'effetto verrà rieseguito solo se una delle dipendenze è cambiata dall'ultimo render. Se l'array delle dipendenze viene omesso, l'effetto verrà eseguito dopo ogni render.

useEffect(setup, dependencies)

Poiché sappiamo che setup deve essere una funzione freccia e che dependencies deve essere un array, otteniamo la seguente struttura per l'hook useEffect.

useEffect(() => {
  // Something that we need to do
  // after the component is rendered or updated
}, [<optional_dependencies>])

Nota

I componenti React spesso si basano sulla combinazione degli hook useEffect e useState. Questi hook lavorano insieme per gestire lo stato e gli effetti collaterali all'interno dei componenti.

Esempio 1:

Creiamo il componente Articles, che utilizzerà l'hook useEffect per assegnare i dati allo stato articles. Questa è un'ottima occasione per esplorare la potente combinazione degli hook di React.

import { useEffect, useState } from "react";
import fetchData from "../service/api";

const Articles = () => {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    fetchData()
      .then((resp) => {
        setArticles(resp.jokes);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

  return (
    // Render some markup based on the articles data
  );
};

All'interno di questo componente, utilizziamo l'hook useEffect per garantire che lo stato articles venga popolato con i dati. Come menzionato in precedenza, la funzione useEffect viene eseguita dopo ogni render, assicurando che i dati vengano visualizzati all'utente se disponibili. Questo garantisce un'esperienza utente fluida con contenuti sempre aggiornati.

Spiegazione riga per riga:

• Riga 1: Importazione degli hook useEffect e useState dalla libreria React per sfruttarne le funzionalità;
• Riga 2: Importazione della funzione fetchData da "../service/api". Questa funzione si occupa di effettuare una richiesta API e recuperare i dati;
• Riga 4: Definizione del componente Articles utilizzando la sintassi convenzionale delle funzioni;
• Riga 5: Inizializzazione dello stato tramite l'hook useState, che rappresenta il valore iniziale della variabile articles. In questo esempio, è un array vuoto;
• Righe 7-15: Caso d'uso reale dell'hook useEffect;
  • Riga 7 e riga 15: sintassi di utilizzo. È così che verrà utilizzato;
  • Riga 8: viene chiamata la funzione fetchData. Questa funzione dovrebbe effettuare una richiesta API e restituire una promise;
  • Righe 9-11: Quando la promise viene risolta (blocco then), riceve un oggetto resp. I dati vengono estratti da resp utilizzando resp.jokes, che viene impostato nello stato articles tramite setArticles;
  • Righe 12-14: Se si verifica un errore durante la richiesta API (nel blocco catch), viene registrato nella console tramite console.error.
• Righe 17-19: Viene renderizzato il markup del componente.

Codice completo dell'app:

Esempio 2:

Creiamo il componente Counter per tracciare un valore counter. L'obiettivo è registrare il valore della variabile counter ogni volta che cambia. Per ottenere questo risultato, utilizzeremo l'hook useEffect con un array di dipendenze costituito dalla variabile counter.

import React, { useState, useEffect } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Count has changed:", count);
  }, [count]);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};

Spiegazione riga per riga:

• Riga 1: Importiamo gli hook useEffect e useState dalla libreria React per sfruttarne le funzionalità;
• Riga 3: La sintassi convenzionale della funzione definisce il componente "Counter";
• Riga 4: Inizializziamo lo stato utilizzando l'hook useState, rappresentando il valore iniziale della variabile count. In questo esempio, è 0;
• Righe 6-8: Il caso d'uso effettivo dell'hook useEffect;
  • Riga 7: questa logica verrà eseguita ogni volta che il valore nell'array delle dipendenze cambia. In questo caso, si tratta della variabile count;
  • Riga 8: array delle dipendenze. Comunichiamo a React che quando il valore della variabile count cambia, esegui il codice all'interno della funzione dell'hook useEffect.
• Righe 14-19: Il markup del componente viene renderizzato.

Codice completo dell'app:

Prenditi un momento per ispezionare la console e osservare la logica di esecuzione della funzione freccia all'interno dell'hook useEffect. La funzione freccia viene eseguita inizialmente al primo rendering e poi richiamata ogni volta che il valore della variabile counter cambia. Puoi verificare questo comportamento osservando i relativi log nella console.