Técnicas de Debounce y Throttle en React

Una de las formas más efectivas para controlar eventos que se pueden disparar con demasiada frecuencia en React, como por ejemplo al redimensionar la ventana, es utilizando las técnicas de debounce y throttle.

Estas técnicas son muy útiles para mejorar el rendimiento de nuestra aplicación React, ya que nos permiten limitar la frecuencia con la que se invoca una función en particular.

Debounce

La técnica debounce se utiliza para agrupar varias invocaciones de una función en una sola, que se ejecuta después de que pasa un cierto tiempo sin que se realicen llamadas a la función. Esto puede ser muy útil, por ejemplo, para controlar eventos de entrada de texto, donde no nos interesa procesar cada una de las entradas de los usuarios, sino el resultado final cuando han terminado de escribir.

Un ejemplo simple de cómo implementar esta técnica en React sería:

import { useState, useEffect } from 'react';
import { debounce } from 'lodash';

function MiComponente() {
  const [texto, setTexto] = useState('');

  useEffect(() => {
    const realizarBusqueda = debounce((texto) => {
      // Aquí realizaríamos la lógica de nuestra búsqueda
    }, 300);

    realizarBusqueda(texto);
  }, [texto]);

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

En este ejemplo, la lógica de búsqueda no se ejecutaría hasta que hayan pasado 300 milisegundos sin que el usuario haya tecleado nada nuevo.

Throttle

Por otro lado, la técnica de throttle limita la frecuencia con la que se puede llamar a una función a un número fijo de veces por segundo. Es decir, si establecemos un retardo de 100ms, la función no se podrá llamar más de 10 veces por segundo. Esta técnica es muy útil para controlar eventos como el scroll o el redimensionamiento de la ventana, que pueden dispararse muchas veces por segundo.

Un ejemplo de cómo implementar throttle en React sería:

import { useEffect } from 'react';
import { throttle } from 'lodash';

function MiComponente() {
  useEffect(() => {
    const controlarRedimensionamiento = throttle(() => {
      // Aquí realizaríamos la lógica que queremos hacer al redimensionar la ventana
    }, 100);

    window.addEventListener('resize', controlarRedimensionamiento);

    return () => {
      window.removeEventListener('resize', controlarRedimensionamiento);
    };
  }, []);

  return <div>Contenido del componente</div>;
};

En este caso, la lógica de redimensionamiento solo se ejecutará como máximo 10 veces por segundo, independientemente de cuántas veces se dispare el evento de redimensionamiento de la ventana.

Conclusión

Las técnicas de debounce y throttle son muy útiles para limitar la frecuencia con la que se llamada a una función en React. Mejoran el rendimiento de la aplicación al evitar el procesamiento innecesario y ayudan a crear una mejor experiencia de usuario.