Optimiza tu Next.js 16 como un profesional

Tu aplicación Next.js 16 se rompe cuando los usuarios hacen múltiples clics rápidos en los botones.

El truco

Antes (mal)

export default function MyComponent() {
  const handleClick = () => {
    // Lógica que puede causar problemas si se llama varias veces rápidamente
    console.log('Botón clicado');
  };

  return <button onClick={handleClick}>Haz clic aquí</button>;
}

Después (bien)

export default function MyComponent() {
  const handleClick = () => {
    // Lógica que puede causar problemas si se llama varias veces rápidamente
    console.log('Botón clicado');
  };

  const handleClickDebounced = debounce(handleClick, 300); // Controla la frecuencia de los clics

  return <button onClick={handleClickDebounced}>Haz clic aquí</button>;
}

// Implementación sencilla de debounce
function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
}

Integrar una función de debounce evita que la lógica interna de handleClick se ejecute repetidamente en un corto periodo. Esto asegura que la aplicación no sufra de comportamientos inesperados cuando los usuarios hacen clics rápidos en el botón. El tiempo de espera de 300 ms es configurable para adaptarse a tus necesidades específicas.

Implementar debounce no solo mejora la experiencia del usuario, sino que también refuerza la estabilidad y rendimiento de tu aplicación.