¿Tus eventos disparan múltiples llamadas y sobrecargan la UI?

El truco

Antes (mal):

import { useState } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');

  const handleChange = (event) => {
    setQuery(event.target.value);
    fetchResults(event.target.value);
  };

  const fetchResults = (query) => {
    console.log(`Fetching results for ${query}`);
  };

  return <input type="text" onChange={handleChange} />;
}

export default SearchComponent;

Después (bien):

import { useState, useEffect } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [debouncedQuery, setDebouncedQuery] = useState(query);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedQuery(query);
    }, 500);

    return () => {
      clearTimeout(handler);
    };
  }, [query]);

  useEffect(() => {
    if (debouncedQuery) fetchResults(debouncedQuery);
  }, [debouncedQuery]);

  const fetchResults = (query) => {
    console.log(`Fetching results for ${query}`);
  };

  return <input type="text" onChange={(e) => setQuery(e.target.value)} />;
}

export default SearchComponent;

Implementar un debounce en tus eventos de UI es clave para evitar llamadas continuas a funciones como fetchResults en cada pulsación de tecla. Este enfoque utiliza useEffect para retrasar la actualización del estado hasta que el usuario deje de escribir, reduciendo así el tráfico innecesario y mejorando el rendimiento.

Añadir un debounce a tus eventos es una solución sencilla que optimiza la eficiencia de tus componentes en Next.js.