useMemo y useCallback para mejorar el rendimiento
Memorice cálculos costosos con useMemo y referencias estables a funciones con useCallback para evitar renderizados innecesarios de los componentes hijos.
useMemo y useCallback para mejorar el rendimiento es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Comportamiento predeterminado de React
De forma predeterminada, React vuelve a renderizar un componente cada vez que cambia su estado o se vuelve a renderizar su padre. Los componentes hijos también se vuelven a renderizar aunque sus props no hayan cambiado. Para la mayoría de los componentes esto está bien: React es rápido.
useMemo: memoizar valores costosos
useMemo(fn, deps) almacena en caché el resultado de un cálculo. La función solo se ejecuta cuando cambian las dependencias. Úselo para cálculos costosos que sería innecesario repetir en cada renderizado.
const expensiveResult = useMemo(() => {
return items.filter(item => item.category === category).sort((a, b) => a.price - b.price);
}, [items, category]);
// Only recalculates when items or category changesuseCallback: memoizar funciones
useCallback(fn, deps) devuelve una función memoizada que mantiene la misma referencia a menos que cambien las dependencias. Úselo al pasar callbacks a componentes profundamente anidados o memoizados.
const handleDelete = useCallback((id: string) => {
setItems(prev => prev.filter(item => item.id !== id));
}, []); // stable reference — empty deps because only setItems is used
<ItemList items={items} onDelete={handleDelete} />React.memo: evitar nuevos renderizados
React.memo(Component) envuelve un componente para que solo se vuelva a renderizar cuando cambien sus props (mediante una comparación superficial). Combínelo con useCallback para mantener estables las props que contienen callbacks.
const MemoItem = React.memo(function Item({ text, onDelete }: ItemProps) {
console.log('Item rendered:', text); // only logs when props change
return <li>{text} <button onClick={onDelete}>×</button></li>;
});
// onDelete must be stable (from useCallback) for memo to helpCuándo NO optimizar
La optimización prematura es una trampa. useMemo y useCallback tienen un coste: el cierre y la comparación de deps. Para operaciones sencillas (filtrar 10 elementos), la sobrecarga supera el beneficio. Optimice cuando mida un problema de rendimiento real.
Perfilar antes de optimizar
Use el Profiler de React DevTools para medir los tiempos de renderizado reales antes de añadir memoización. El Profiler muestra qué componentes tardan más y cuántas veces se renderizan. Corrija los problemas basándose en datos, no en suposiciones.
useMemo para mantener referencias estables
useMemo también resulta útil para mantener estable una referencia, no por el rendimiento del cálculo en sí, sino para evitar que un memo o un efecto posterior se vuelva a ejecutar innecesariamente.
// Without useMemo, this creates a new array every render:
const config = useMemo(() => ({ endpoint: '/api', timeout: 5000 }), []);
// Without memoization, useEffect would re-run on every render:
useEffect(() => { initSDK(config); }, [config]);Dependencias de useCallback
useCallback sigue las mismas reglas de dependencias que useEffect. Incluya todas las variables del ámbito externo que utilice el callback. Los actualizadores de estado (de useState) siempre son estables y no es necesario incluirlos en deps.
Relación entre useMemo y useCallback
useCallback(fn, deps) equivale a useMemo(() => fn, deps). Utilizan el mismo mecanismo: useCallback es simplemente una forma abreviada de memoizar funciones específicamente.
Memoización de elementos de listas
Un patrón habitual es memoizar los componentes de los elementos de una lista cuando esta es grande y se vuelve a renderizar con frecuencia. Pase callbacks estables mediante useCallback para no anular el efecto del memo.
const MemoRow = React.memo(Row);
const handleEdit = useCallback((id) => edit(id), []);
const handleDel = useCallback((id) => remove(id), []);
{rows.map(row => (
<MemoRow key={row.id} row={row} onEdit={handleEdit} onDelete={handleDel} />
))}Memoización del valor de Context
Memoice el valor que se pasa a un Provider de Context para evitar que todos los consumidores se vuelvan a renderizar cada vez que se vuelve a renderizar el padre del Provider.
const value = useMemo(() => ({ user, login, logout }), [user]);Comprobación rápida
¿Cuál es el propósito de useCallback?
Recapitulación: useMemo y useCallback
useMemo almacena en caché valores calculados costosos. useCallback almacena en caché referencias a funciones. React.memo evita nuevos renderizados cuando las props no cambian mediante una comparación superficial. Combine los tres para mejorar el rendimiento a nivel de componente. Perfile primero: la memoización prematura añade complejidad sin aportar beneficios. Las referencias estables evitan que los efectos y memos posteriores se vuelvan a ejecutar.
Preguntas frecuentes
¿La lección «useMemo y useCallback para mejorar el rendimiento» es gratis?
Sí — el texto completo de «useMemo y useCallback para mejorar el rendimiento» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «useMemo y useCallback para mejorar el rendimiento»?
Memorice cálculos costosos con useMemo y referencias estables a funciones con useCallback para evitar renderizados innecesarios de los componentes hijos. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «useMemo y useCallback para mejorar el rendimiento»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- useContext para el estado global
- useReducer para estados complejos
- useMemo y useCallback para mejorar el rendimiento
- Hooks personalizados: extraer lógica reutilizable