Separare eventi ed Effetti

Scegliere tra gestori di eventi ed Effetti

Per prima cosa, riassumiamo la differenza tra gestori di eventi ed Effetti.

Immagina di implementare un componente chat room. I tuoi requisiti sono questi:

1. Il tuo componente dovrebbe connettersi automaticamente alla chat room selezionata.
2. Quando clicchi il pulsante “Send”, dovrebbe inviare un messaggio alla chat.

Supponiamo che tu abbia già implementato il codice per entrambi, ma non sei sicuro dove metterlo. Dovresti usare gestori di eventi o Effetti? Ogni volta che devi rispondere a questa domanda, considera perché il codice deve essere eseguito.

I gestori di eventi vengono eseguiti in risposta a interazioni specifiche

Dal punto di vista dell’utente, l’invio di un messaggio dovrebbe avvenire perché è stato cliccato il particolare pulsante “Send”. L’utente si arrabbierebbe se inviassi il suo messaggio in qualsiasi altro momento o per qualsiasi altra ragione. Ecco perché l’invio di un messaggio dovrebbe essere un gestore di eventi. I gestori di eventi ti permettono di gestire interazioni specifiche:

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');
  // ...
  function handleSendClick() {
    sendMessage(message);
  }
  // ...
  return (
    <>
      <input value={message} onChange={e => setMessage(e.target.value)} />
      <button onClick={handleSendClick}>Send</button>
    </>
  );
}

Con un gestore di eventi, puoi essere sicuro che sendMessage(message) verrà eseguito solo se l’utente preme il pulsante.

Gli Effetti vengono eseguiti quando serve la sincronizzazione

Ricorda che devi anche mantenere il componente connesso alla chat room. Dove va quel codice?

Il motivo per eseguire questo codice non è una particolare interazione. Non importa perché o come l’utente è arrivato alla schermata della chat room. Ora che la sta guardando e potrebbe interagirci, il componente deve restare connesso al server di chat selezionato. Anche se il componente chat room fosse la schermata iniziale della tua app e l’utente non avesse compiuto alcuna interazione, dovresti comunque connetterti. Ecco perché è un Effetto:

function ChatRoom({ roomId }) {
  // ...
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [roomId]);
  // ...
}

Con questo codice, puoi essere sicuro che c’è sempre una connessione attiva al server di chat attualmente selezionato, indipendentemente dalle interazioni specifiche compiute dall’utente. Che l’utente abbia solo aperto la tua app, selezionato una stanza diversa o navigato verso un’altra schermata e poi tornato indietro, il tuo Effetto garantisce che il componente resti sincronizzato con la stanza attualmente selezionata e si ricollegherà ogni volta che è necessario.

Valori reattivi e logica reattiva

Intuitivamente, potresti dire che i gestori di eventi vengono sempre attivati “manualmente”, per esempio cliccando un pulsante. Gli Effetti, invece, sono “automatici”: vengono eseguiti e rieseguiti quanto spesso serve per restare sincronizzati.

C’è un modo più preciso di pensarci.

Props, state e variabili dichiarate nel corpo del componente si chiamano valori reattivi. In questo esempio, serverUrl non è un valore reattivo, ma roomId e message lo sono. Partecipano al flusso di dati della renderizzazione:

const serverUrl = 'https://localhost:1234';

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');

  // ...
}

Valori reattivi come questi possono cambiare a causa di una ri-renderizzazione. Per esempio, l’utente può modificare il message o scegliere un roomId diverso in un menu a tendina. Gestori di eventi ed Effetti rispondono ai cambiamenti in modo diverso:

• La logica all’interno dei gestori di eventi non è reattiva. Non verrà rieseguita a meno che l’utente non compia di nuovo la stessa interazione (per esempio, un click). I gestori di eventi possono leggere valori reattivi senza “reagire” ai loro cambiamenti.
• La logica all’interno degli Effetti è reattiva. Se il tuo Effetto legge un valore reattivo, devi specificarlo come dipendenza. Poi, se una ri-renderizzazione fa cambiare quel valore, React rieseguirà la logica del tuo Effetto con il nuovo valore.

Rivediamo l’esempio precedente per illustrare questa differenza.

La logica all’interno dei gestori di eventi non è reattiva

Dai un’occhiata a questa riga di codice. Questa logica dovrebbe essere reattiva o no?

    // ...
    sendMessage(message);
    // ...

Dal punto di vista dell’utente, un cambiamento al message non significa che vogliono inviare un messaggio. Significa solo che l’utente sta digitando. In altre parole, la logica che invia un messaggio non dovrebbe essere reattiva. Non dovrebbe rieseguirsi solo perché il valore reattivo è cambiato. Ecco perché appartiene al gestore di eventi:

  function handleSendClick() {
    sendMessage(message);
  }

I gestori di eventi non sono reattivi, quindi sendMessage(message) verrà eseguito solo quando l’utente clicca il pulsante Send.

La logica all’interno degli Effetti è reattiva

Ora torniamo a queste righe:

    // ...
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    // ...

Dal punto di vista dell’utente, un cambiamento al roomId significa che vogliono connettersi a una stanza diversa. In altre parole, la logica per connettersi alla stanza dovrebbe essere reattiva. Vuoi che queste righe di codice “tengano il passo” con il valore reattivo e vengano rieseguite se quel valore è diverso. Ecco perché appartiene a un Effetto:

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect()
    };
  }, [roomId]);

Gli Effetti sono reattivi, quindi createConnection(serverUrl, roomId) e connection.connect() verranno eseguiti per ogni valore distinto di roomId. Il tuo Effetto mantiene la connessione alla chat sincronizzata con la stanza attualmente selezionata.

Estrarre la logica non reattiva dagli Effetti

Le cose si complicano quando vuoi mescolare logica reattiva con logica non reattiva.

Per esempio, immagina di voler mostrare una notifica quando l’utente si connette alla chat. Leggi il tema attuale (scuro o chiaro) dalle props così da poter mostrare la notifica nel colore corretto:

function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      showNotification('Connected!', theme);
    });
    connection.connect();
    // ...

Tuttavia, theme è un valore reattivo (può cambiare a causa di una ri-renderizzazione) e ogni valore reattivo letto da un Effetto deve essere dichiarato come sua dipendenza. Ora devi specificare theme come dipendenza del tuo Effetto:

function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      showNotification('Connected!', theme);
    });
    connection.connect();
    return () => {
      connection.disconnect()
    };
  }, [roomId, theme]); // ✅ All dependencies declared
  // ...

Gioca con questo esempio e vedi se riesci a individuare il problema con questa esperienza utente:

Quando roomId cambia, la chat si ricollega come ti aspetteresti. Ma poiché theme è anche una dipendenza, la chat si ricollega anche ogni volta che passi dal tema scuro a quello chiaro. Non è il massimo!

In altre parole, non vuoi che questa riga sia reattiva, anche se si trova all’interno di un Effetto (che è reattivo):

      // ...
      showNotification('Connected!', theme);
      // ...

Hai bisogno di un modo per separare questa logica non reattiva dall’Effetto reattivo che la circonda.

Dichiarare un Effect Event

Usa un Hook speciale chiamato useEffectEvent per estrarre questa logica non reattiva dal tuo Effetto:

import { useEffect, useEffectEvent } from 'react';

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme);
  });
  // ...

Qui, onConnected si chiama un Effect Event. Fa parte della logica del tuo Effetto, ma si comporta molto più come un gestore di eventi. La logica al suo interno non è reattiva e “vede” sempre i valori più recenti delle tue props e del tuo state.

Ora puoi chiamare l’Effect Event onConnected dall’interno del tuo Effetto:

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme);
  });

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      onConnected();
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // ✅ All dependencies declared
  // ...

Questo risolve il problema. Nota che hai dovuto rimuovere theme dall’elenco delle dipendenze del tuo Effetto, perché non è più usato nell’Effetto. Non devi neanche aggiungere onConnected, perché gli Effect Event non sono reattivi e devono essere omessi dalle dipendenze.

Verifica che il nuovo comportamento funzioni come ti aspetteresti:

Puoi pensare agli Effect Event come molto simili ai gestori di eventi. La differenza principale è che i gestori di eventi vengono eseguiti in risposta a interazioni dell’utente, mentre gli Effect Event vengono attivati da te dagli Effetti. Gli Effect Event ti permettono di “rompere la catena” tra la reattività degli Effetti e il codice che non dovrebbe essere reattivo.

Leggere le props e lo state più recenti con gli Effect Event

Gli Effect Event ti permettono di correggere molti pattern in cui potresti essere tentato di sopprimere il linter delle dipendenze.

Per esempio, supponiamo che tu abbia un Effetto per registrare le visite alle pagine:

function Page() {
  useEffect(() => {
    logVisit();
  }, []);
  // ...
}

In seguito, aggiungi più route al tuo sito. Ora il tuo componente Page riceve una prop url con il percorso attuale. Vuoi passare l’url come parte della tua chiamata logVisit, ma il linter delle dipendenze si lamenta:

function Page({ url }) {
  useEffect(() => {
    logVisit(url);
  }, []); // 🔴 React Hook useEffect has a missing dependency: 'url'
  // ...
}

Pensa a cosa vuoi che faccia il codice. Vuoi registrare una visita separata per URL diversi, poiché ogni URL rappresenta una pagina diversa. In altre parole, questa chiamata logVisit dovrebbe essere reattiva rispetto all’url. Ecco perché, in questo caso, ha senso seguire il linter delle dipendenze e aggiungere url come dipendenza:

function Page({ url }) {
  useEffect(() => {
    logVisit(url);
  }, [url]); // ✅ All dependencies declared
  // ...
}

Ora supponiamo che tu voglia includere il numero di articoli nel carrello insieme a ogni visita alla pagina:

function Page({ url }) {
  const { items } = useContext(ShoppingCartContext);
  const numberOfItems = items.length;

  useEffect(() => {
    logVisit(url, numberOfItems);
  }, [url]); // 🔴 React Hook useEffect has a missing dependency: 'numberOfItems'
  // ...
}

Hai usato numberOfItems all’interno dell’Effetto, quindi il linter ti chiede di aggiungerlo come dipendenza. Tuttavia, non vuoi che la chiamata logVisit sia reattiva rispetto a numberOfItems. Se l’utente mette qualcosa nel carrello e numberOfItems cambia, questo non significa che l’utente ha visitato di nuovo la pagina. In altre parole, visitare la pagina è, in un certo senso, un “evento”. Avviene in un momento preciso nel tempo.

Dividi il codice in due parti:

function Page({ url }) {
  const { items } = useContext(ShoppingCartContext);
  const numberOfItems = items.length;

  const onVisit = useEffectEvent(visitedUrl => {
    logVisit(visitedUrl, numberOfItems);
  });

  useEffect(() => {
    onVisit(url);
  }, [url]); // ✅ All dependencies declared
  // ...
}

Qui, onVisit è un Effect Event. Il codice al suo interno non è reattivo. Ecco perché puoi usare numberOfItems (o qualsiasi altro valore reattivo!) senza preoccuparti che causerà la riesecuzione del codice circostante al cambiamento.

D’altra parte, l’Effetto stesso resta reattivo. Il codice all’interno dell’Effetto usa la prop url, quindi l’Effetto si rieseguirà dopo ogni ri-renderizzazione con un url diverso. Questo, a sua volta, chiamerà l’Effect Event onVisit.

Di conseguenza, chiamerai logVisit per ogni cambiamento all’url e leggerai sempre l’numberOfItems più recente. Tuttavia, se numberOfItems cambia da solo, questo non causerà la riesecuzione di nessun codice.

  const onVisit = useEffectEvent(() => {
    logVisit(url, numberOfItems);
  });

  useEffect(() => {
    onVisit();
  }, [url]);

  const onVisit = useEffectEvent(visitedUrl => {
    logVisit(visitedUrl, numberOfItems);
  });

  useEffect(() => {
    onVisit(url);
  }, [url]);

  const onVisit = useEffectEvent(visitedUrl => {
    logVisit(visitedUrl, numberOfItems);
  });

  useEffect(() => {
    setTimeout(() => {
      onVisit(url);
    }, 5000); // Delay logging visits
  }, [url]);

function Page({ url }) {
  const { items } = useContext(ShoppingCartContext);
  const numberOfItems = items.length;

  useEffect(() => {
    logVisit(url, numberOfItems);
    // 🔴 Avoid suppressing the linter like this:
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [url]);
  // ...
}

import { useState, useEffect } from 'react';

export default function App() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [canMove, setCanMove] = useState(true);

  function handleMove(e) {
    if (canMove) {
      setPosition({ x: e.clientX, y: e.clientY });
    }
  }

  useEffect(() => {
    window.addEventListener('pointermove', handleMove);
    return () => window.removeEventListener('pointermove', handleMove);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <>
      <label>
        <input type="checkbox"
          checked={canMove}
          onChange={e => setCanMove(e.target.checked)}
        />
        The dot is allowed to move
      </label>
      <hr />
      <div style={{
        position: 'absolute',
        backgroundColor: 'pink',
        borderRadius: '50%',
        opacity: 0.6,
        transform: `translate(${position.x}px, ${position.y}px)`,
        pointerEvents: 'none',
        left: -20,
        top: -20,
        width: 40,
        height: 40,
      }} />
    </>
  );
}

import { useState, useEffect } from 'react';
import { useEffectEvent } from 'react';

export default function App() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [canMove, setCanMove] = useState(true);

  const onMove = useEffectEvent(e => {
    if (canMove) {
      setPosition({ x: e.clientX, y: e.clientY });
    }
  });

  useEffect(() => {
    window.addEventListener('pointermove', onMove);
    return () => window.removeEventListener('pointermove', onMove);
  }, []);

  return (
    <>
      <label>
        <input type="checkbox"
          checked={canMove}
          onChange={e => setCanMove(e.target.checked)}
        />
        The dot is allowed to move
      </label>
      <hr />
      <div style={{
        position: 'absolute',
        backgroundColor: 'pink',
        borderRadius: '50%',
        opacity: 0.6,
        transform: `translate(${position.x}px, ${position.y}px)`,
        pointerEvents: 'none',
        left: -20,
        top: -20,
        width: 40,
        height: 40,
      }} />
    </>
  );
}

Limitazioni degli Effect Event

Gli Effect Event sono molto limitati nel modo in cui puoi usarli:

• Chiamali solo dall’interno degli Effetti.
• Non passarli mai ad altri componenti o Hooks.

Per esempio, non dichiarare e passare un Effect Event così:

function Timer() {
  const [count, setCount] = useState(0);

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

  useTimer(onTick, 1000); // 🔴 Avoid: Passing Effect Events

  return <h1>{count}</h1>
}

function useTimer(callback, delay) {
  useEffect(() => {
    const id = setInterval(() => {
      callback();
    }, delay);
    return () => {
      clearInterval(id);
    };
  }, [delay, callback]); // Need to specify "callback" in dependencies
}

Invece, dichiara sempre gli Effect Event direttamente accanto agli Effetti che li usano:

function Timer() {
  const [count, setCount] = useState(0);
  useTimer(() => {
    setCount(count + 1);
  }, 1000);
  return <h1>{count}</h1>
}

function useTimer(callback, delay) {
  const onTick = useEffectEvent(() => {
    callback();
  });

  useEffect(() => {
    const id = setInterval(() => {
      onTick(); // ✅ Good: Only called locally inside an Effect
    }, delay);
    return () => {
      clearInterval(id);
    };
  }, [delay]); // No need to specify "onTick" (an Effect Event) as a dependency
}

Gli Effect Event sono “pezzi” non reattivi del codice del tuo Effetto. Dovrebbero stare accanto all’Effetto che li usa.