Optimización de Debounce y Throttle en React con LowDash

Curso de Next.js: Optimización y Manejo de Grandes Datasets

Contenido del curso

Introducción

1
Optimización de JavaScript con Grandes Datasets en Next.js
02:49 min

Throttling y Debouncing

Cache en memoria

Memoización

Scrolling

9
Optimización de Scroll con ReactWindow y Intersection Observer
04:03 min

Conclusiones

10
Optimización de Rendimiento en React con Throttling y Debouncing
01:18 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:13

Optimización de Debounce y Throttle en React con LowDash

Curso de Next.js: Optimización y Manejo de Grandes Datasets

Clase 4 de 10

Clase 4 / 10

Recursos

¿Cómo implementar debouncing y throttling con Lodash en React?

Cuando trabajamos con React, es común usar librerías auxiliares que nos faciliten el control de ciertas funcionalidades. Una de las más populares es Lodash, conocida por su capacidad de manipulación de datos. Sin embargo, cuando se trata de implementar técnicas como el debouncing y throttling, debemos ser cuidadosos para asegurar que funcionen adecuadamente. Veamos cómo lograrlo.

¿Qué son el debouncing y throttling?

Ambas técnicas están relacionadas con el manejo de la ejecución de funciones en el tiempo:

Debouncing: asegura que una función solo se ejecuta después de que haya dejado de ser llamada durante un periodo de tiempo determinado. Ideal para manejar eventos de entrada del usuario, donde queremos evitar múltiples llamadas simultáneas.
Throttling: limita la cantidad de veces que se ejecuta una función en un periodo de tiempo, sin importar cuántas veces el evento es llamado.

¿Cuál es el problema al usar Lodash en React?

Al implementar estas técnicas en un proyecto de React con Lodash, podemos encontrarnos con un problema: las funciones que dependen del tiempo (como debounce y throttle) deben garantizar que no se crean múltiples instancias cada vez que nuestro componente se renderiza. React, al re-renderizar componentes por cambios de estado, recrea estas funciones de manera indeseada, lo cual ocasiona que el efecto deseado no funcione correctamente.

¿Cómo puedo resolverlo usando useCallback?

Para corregir este problema, React nos proporciona dos hooks útiles: useRef y useCallback. En este caso, usaremos useCallback para asegurarnos que la función debounce se instancie solo una vez durante el ciclo de vida del componente.

import { useCallback } from 'react';
import debounce from 'lodash/debounce';

const DebouncedComponent = () => {
  const debouncedSearch = useCallback(
    debounce((searchTerm) => {
      // Aquí iría la lógica de la búsqueda
      console.log('Searching:', searchTerm);
    }, 300), // Tiempo de espera en milisegundos
    [] // Array de dependencias vacío para asegurar un solo llamado
  );

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

¿Qué ventajas tiene esta implementación?

Optimización: Reduce la carga sobre los recursos del servidor al limitar las llamadas a la API.
Performance: Mejora el rendimiento al minimizar la cantidad de lógica que React necesita controlar en cada renderizado.
Simplicidad: El uso de useCallback elimina la necesidad de gestionar manualmente la instancia de la función entre renders.

¿Por qué podría preferir usar useRef?

useRef también mantiene valores persistentes entre renders sin provocar re-renderizados adicionales. Puedes explorarlo si prefieres una solución alternativa o deseas manipular la instancia de la función directamente.

import { useRef, useEffect } from 'react';
import debounce from 'lodash/debounce';

const DebouncedComponent = () => {
  const searchRef = useRef(
    debounce((searchTerm) => {
      console.log('Searching:', searchTerm);
    }, 300)
  );

  useEffect(() => {
    const debouncedSearch = searchRef.current;

    return () => {
      debouncedSearch.cancel();
    };
  }, []);

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

Poner en práctica estas técnicas no solo optimiza nuestra aplicación, sino que también nos permite gestionar las interacciones del usuario de una manera mucho más fluida y eficiente. ¡Continúa explorando y practicando para dominar estos conceptos avanzados!

Resumen

¿Cómo implementar debouncing y throttling con Lodash en React?

¿Qué son el debouncing y throttling?

Ambas técnicas están relacionadas con el manejo de la ejecución de funciones en el tiempo:

Debouncing: asegura que una función solo se ejecuta después de que haya dejado de ser llamada durante un periodo de tiempo determinado. Ideal para manejar eventos de entrada del usuario, donde queremos evitar múltiples llamadas simultáneas.
Throttling: limita la cantidad de veces que se ejecuta una función en un periodo de tiempo, sin importar cuántas veces el evento es llamado.

¿Cuál es el problema al usar Lodash en React?

¿Cómo puedo resolverlo usando useCallback?

import { useCallback } from 'react';
import debounce from 'lodash/debounce';

const DebouncedComponent = () => {
  const debouncedSearch = useCallback(
    debounce((searchTerm) => {
      // Aquí iría la lógica de la búsqueda
      console.log('Searching:', searchTerm);
    }, 300), // Tiempo de espera en milisegundos
    [] // Array de dependencias vacío para asegurar un solo llamado
  );

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

¿Qué ventajas tiene esta implementación?

Optimización: Reduce la carga sobre los recursos del servidor al limitar las llamadas a la API.
Performance: Mejora el rendimiento al minimizar la cantidad de lógica que React necesita controlar en cada renderizado.
Simplicidad: El uso de useCallback elimina la necesidad de gestionar manualmente la instancia de la función entre renders.

¿Por qué podría preferir usar useRef?

import { useRef, useEffect } from 'react';
import debounce from 'lodash/debounce';

const DebouncedComponent = () => {
  const searchRef = useRef(
    debounce((searchTerm) => {
      console.log('Searching:', searchTerm);
    }, 300)
  );

  useEffect(() => {
    const debouncedSearch = searchRef.current;

    return () => {
      debouncedSearch.cancel();
    };
  }, []);

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

Introducción

Optimización de JavaScript con Grandes Datasets en Next.js

Throttling y Debouncing

Optimización de Búsquedas con Throttle y Debounce en Next.js

Implementación de Debounce en React con Hooks y JavaScript

Optimización de Debounce y Throttle en React con LowDash

Cache en memoria

Optimización de Caché en Aplicaciones React con ReactQuery y SWR

Optimización de búsqueda en JavaScript: Arrays vs. Objetos

Memoización

Optimización de Componentes en React con Memoización

Optimización de Componentes con React.memo y React.useMemo

Scrolling

Optimización de Scroll con ReactWindow y Intersection Observer

Conclusiones

Optimización de Rendimiento en React con Throttling y Debouncing

Optimización de Debounce y Throttle en React con LowDash

Progreso del curso

Introducción

Throttling y Debouncing

Cache en memoria

Memoización

Scrolling

Conclusiones

Recursos

Recursos