El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, exploraremos dos hooks avanzados de React: useMemo y useCallback. Ambos hooks son utilizados para optimizar el rendimiento de las aplicaciones de React al evitar cálculos innecesarios y la recreación de funciones.

Introducción a useMemo

El hook useMemo se utiliza para memorizar valores calculados. Esto es útil cuando tienes cálculos costosos que no deberían ejecutarse en cada renderizado a menos que sus dependencias hayan cambiado.

Sintaxis

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

computeExpensiveValue es una función que realiza un cálculo costoso.
[a, b] es la lista de dependencias. useMemo solo volverá a calcular el valor si alguna de estas dependencias cambia.

Ejemplo Práctico

Supongamos que tenemos una función que realiza un cálculo costoso:

function computeExpensiveValue(a, b) {
  console.log('Calculando valor...');
  return a + b;
}

function MyComponent({ a, b }) {
  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

  return (
    <div>
      <p>Valor calculado: {memoizedValue}</p>
    </div>
  );
}

En este ejemplo, computeExpensiveValue solo se ejecutará cuando a o b cambien, optimizando así el rendimiento.

Introducción a useCallback

El hook useCallback se utiliza para memorizar funciones. Esto es útil cuando pasas funciones a componentes hijos que dependen de props o state, evitando que se creen nuevas instancias de la función en cada renderizado.

Sintaxis

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

doSomething es la función que deseas memorizar.
[a, b] es la lista de dependencias. useCallback solo volverá a crear la función si alguna de estas dependencias cambia.

Ejemplo Práctico

Supongamos que tenemos un componente que pasa una función a un componente hijo:

function MyComponent({ a, b }) {
  const handleClick = useCallback(() => {
    console.log('Clicked!', a, b);
  }, [a, b]);

  return (
    <div>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

En este ejemplo, handleClick solo se recreará cuando a o b cambien, evitando renderizados innecesarios del ChildComponent.

Comparación entre useMemo y useCallback

Hook	Propósito	Retorno	Uso Común
`useMemo`	Memorizar valores calculados	Valor memoizado	Cálculos costosos, valores derivados
`useCallback`	Memorizar funciones	Función memoizada	Pasar funciones a componentes hijos, handlers

Ejercicio Práctico

Ejercicio

Crea un componente que tenga un input y un botón. El botón debe mostrar el número de veces que ha sido clicado. Usa useMemo para memorizar el valor calculado de la longitud del texto del input y useCallback para memorizar la función que maneja el clic del botón.

Solución

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

function App() {
  const [text, setText] = useState('');
  const [count, setCount] = useState(0);

  const textLength = useMemo(() => {
    console.log('Calculando longitud del texto...');
    return text.length;
  }, [text]);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <p>Longitud del texto: {textLength}</p>
      <button onClick={handleClick}>Clickeado {count} veces</button>
    </div>
  );
}

export default App;

Explicación

textLength se memoriza usando useMemo y solo se recalcula cuando text cambia.
handleClick se memoriza usando useCallback y solo se recrea cuando count cambia.

Conclusión

En esta lección, hemos aprendido cómo useMemo y useCallback pueden ser utilizados para optimizar el rendimiento de nuestras aplicaciones de React. Estos hooks son especialmente útiles cuando se trabaja con cálculos costosos o cuando se pasan funciones a componentes hijos. Asegúrate de usarlos adecuadamente para evitar renderizados innecesarios y mejorar la eficiencia de tu aplicación.

En el próximo tema, exploraremos técnicas adicionales de optimización del rendimiento en React.

Hooks useMemo y useCallback

Introducción a useMemo

Sintaxis

Ejemplo Práctico

Introducción a useCallback

Sintaxis

Ejemplo Práctico

Comparación entre useMemo y useCallback

Ejercicio Práctico

Ejercicio

Solución

Explicación

Conclusión

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa