React useEvent: Stabilizzare i gestori di eventi per applicazioni robuste

Utilizzare `useEvent` in pratica

Rivediamo gli esempi precedenti e applichiamo `useEvent` per risolvere i problemi.

Risolvere le chiusure obsolete

            
import React, { useState, useEffect, useCallback } from 'react';

function useEvent(handler) {
    const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

function MyComponent() {
  const [count, setCount] = useState(0);
  const [alertCount, setAlertCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  const handleClick = useEvent(() => {
    setAlertCount(count);
    alert(`Count is: ${count}`);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Show Count</button>
      <p>Alert Count: {alertCount}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Ora, `handleClick` è una funzione stabile, ma quando viene chiamata, accede al valore più recente di `count` tramite il ref. Questo previene il problema della chiusura obsoleta.

Prevenire i re-render non necessari

            
import React, { useState, memo, useCallback } from 'react';

function useEvent(handler) {
  const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

const ChildComponent = memo(({ onClick }) => {
  console.log('ChildComponent re-rendered');
  return <button onClick={onClick}>Click Me</button>;
});

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

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

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

            

              
                Copy
              
            
          

Poiché `handleClick` è ora un riferimento di funzione stabile, `ChildComponent` si re-renderizzerà solo quando le sue prop cambiano effettivamente, migliorando le prestazioni.

Implementazioni alternative e considerazioni

`useEvent` con `useLayoutEffect`

In alcuni casi, potresti aver bisogno di usare `useLayoutEffect` invece di `useEffect` all'interno dell'implementazione di `useEvent`. `useLayoutEffect` si attiva sincronicamente dopo tutte le mutazioni del DOM, ma prima che il browser abbia la possibilità di dipingere. Questo può essere importante se il gestore di eventi deve leggere o modificare il DOM immediatamente dopo che l'evento è stato attivato. Questo aggiustamento assicura che tu catturi lo stato del DOM più aggiornato all'interno del tuo gestore di eventi, prevenendo potenziali incongruenze tra ciò che il tuo componente mostra e i dati che usa. La scelta tra `useEffect` e `useLayoutEffect` dipende dai requisiti specifici del tuo gestore di eventi e dalla tempistica degli aggiornamenti del DOM.

            
import { useRef, useCallback, useLayoutEffect } from 'react';

function useEvent(handler) {
  const handlerRef = useRef(handler);

  useLayoutEffect(() => {
    handlerRef.current = handler;
  }, [handler]);

  return useCallback((...args) => {
    handlerRef.current(...args);
  }, []);
}

            

              
                Copy
              
            
          

Avvertenze e potenziali problemi

• Complessità: Sebbene `useEvent` risolva problemi specifici, aggiunge uno strato di complessità al tuo codice. È importante comprendere i concetti sottostanti per usarlo efficacemente.
• Sovrautilizzo: Non usare `useEvent` indiscriminatamente. Applicalo solo quando stai riscontrando chiusure obsolete o re-render non necessari correlati ai gestori di eventi.
• Testing: Testare i componenti che usano `useEvent` richiede un'attenzione particolare per assicurarsi che la logica del gestore corretta venga eseguita. Potrebbe essere necessario mockare l'hook `useEvent` o accedere direttamente a `handlerRef` nei tuoi test.

Prospettive globali sulla gestione degli eventi

Quando si costruiscono applicazioni per un pubblico globale, è cruciale considerare le differenze culturali e i requisiti di accessibilità nella gestione degli eventi:

• Navigazione da tastiera: Assicurati che tutti gli elementi interattivi siano accessibili tramite la navigazione da tastiera. Gli utenti in diverse regioni potrebbero fare affidamento sulla navigazione da tastiera a causa di disabilità o preferenze personali.
• Eventi touch: Supporta gli eventi touch per gli utenti su dispositivi mobili. Considera le regioni in cui l'accesso a internet mobile è più diffuso rispetto all'accesso desktop.
• Metodi di input: Sii consapevole dei diversi metodi di input utilizzati in tutto il mondo, come i metodi di input cinese, giapponese e coreano. Testa la tua applicazione con questi metodi di input per assicurarti che gli eventi siano gestiti correttamente.
• Accessibilità: Segui sempre le migliori pratiche di accessibilità, assicurandoti che i tuoi gestori di eventi siano compatibili con i lettori di schermo e altre tecnologie assistive. Questo è particolarmente cruciale per esperienze utente inclusive attraverso diverse origini culturali.
• Fusi orari e formati data/ora: Quando si gestiscono eventi che coinvolgono date e orari (ad esempio, strumenti di pianificazione, calendari di appuntamenti), sii consapevole dei fusi orari e dei formati data/ora utilizzati in diverse regioni. Fornisci opzioni agli utenti per personalizzare queste impostazioni in base alla loro posizione.

Alternative a `useEvent`

Sebbene `useEvent` sia una tecnica potente, esistono approcci alternativi per la gestione dei gestori di eventi in React:

• Lifting State (Sollevamento dello stato): A volte, la soluzione migliore è sollevare lo stato da cui dipende il gestore di eventi a un componente di livello superiore. Questo può semplificare il gestore di eventi ed eliminare la necessità di `useEvent`.
• `useReducer`:** Se la logica di stato del tuo componente è complessa, `useReducer` può aiutare a gestire gli aggiornamenti di stato in modo più prevedibile e ridurre la probabilità di chiusure obsolete.
• Componenti a classe: Sebbene meno comuni nel React moderno, i componenti a classe forniscono un modo naturale per associare i gestori di eventi all'istanza del componente, evitando il problema della closure.
• Funzioni inline con dipendenze: Usa chiamate di funzione inline con dipendenze per assicurarti che valori freschi vengano passati ai gestori di eventi. `onClick={() => handleClick(arg1, arg2)}` con `arg1` e `arg2` aggiornati tramite lo stato creerà una nuova funzione anonima ad ogni render, garantendo così valori di closure aggiornati, ma causerà re-render non necessari, proprio il problema che `useEvent` risolve.