Guías Técnicas

useMemo en React Native: Optimización de Renderizados

  ¿Qué es useMemo en React Native?

El hook useMemo se usa para memorizar el valor devuelto por una función “pesada”, y solo recalcularlo si las dependencias cambian. Ayuda a evitar cálculos innecesarios y mejorar el rendimiento en componentes que se renderizan muchas veces.

⚙️ Sintaxis básica del hook useMemo

Acontinuación, te muestro la sintaxis básica del hook useMemo:

jsx 
const valorMemorizado = useMemo(() => {
  return funcionPesada();
}, [dependencias]);
  Explicación

  • funcionPesada: Función que realiza un cálculo costoso.
  • dependencias: Array de dependencias que determina cuándo se debe volver a calcular el valor memorizado. Si alguna de las dependencias cambia, se recalcula el valor.
  • valorMemorizado: Valor devuelto por la función, que se mantendrá en memoria hasta que cambien las dependencias.

💡 Ejemplo práctico

Para ilustrar el uso de useMemo, aquí tienes un ejemplo sencillo:

jsx 
import React, { useState, useMemo } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const App = () => {
const [contador, setContador] = useState(0);
const [otroContador, setOtroContador] = useState(0);

const doble = useMemo(() => {
  console.log('Calculando doble...');
  return contador * 2;
}, [contador]);

return (
  <View style={styles.container}>
    <Text style={styles.text}>Contador: {contador}</Text>
    <Text style={styles.text}>Doble: {doble}</Text>
    <View style={styles.buttonContainer}>
      <Button title="Incrementar Contador" onPress={() => setContador(contador + 1)} color="#4CAF50" />
    </View>
    <View style={styles.buttonContainer}>
      <Button title="Incrementar Otro Contador" onPress={() => setOtroContador(otroContador + 1)} color="#2196F3" />
    </View>
  </View>
);
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 18,
    marginBottom: 10,
    fontWeight: '600',
  },
  buttonContainer: {
    marginVertical: 10,
    width: '80%',
  },
});

export default App;

A continuación, se muestra como usar useMemo en un componente para memorizar el resultado del cálculo del doble del contador, evitando recalcularlo si el valor no cambia. Se muestran dos botones: uno incrementa el contador (afecta al doble) y otro incrementa un contador independiente.



  Nota

Aunque se renderice el componente muchas veces, el cálculo del doble solo se ejecuta cuando contador cambia. Ideal para operaciones costosas o datos derivados.

  Cuándo usar el hook useMemo

  • Cuando tienes funciones con mucho procesamiento (filtros, cálculos, mapeos complejos, etc).
  • Si usas listas grandes con operaciones previas al render.
  • Al trabajar con React.memo en componentes hijos y quieres evitar renderizados innecesarios.

  Cuándo evitarlo el uso del hook useMemo

  • Si el cálculo es muy simple.
  • Si no hay problemas de rendimiento.
  • Si usas useMemo en todo “por si acaso”, puede volverse contraproducente.

🧪 Ejemplo con lista filtrada

Este fragmento de código ilustra el uso de useMemo para filtrar y memorizar una lista de usuarios activos, evitando cálculos innecesarios en cada render. Luego muestra esa lista usando FlatList con estilos simples en React Native.


  Importante

Si aún tienes dudas sobre cómo trabajar con el hook useEffect, te recomiendo revisar el recurso adicional Ejemplos de Hooks, donde encontrarás ejemplos prácticos que te ayudarán a dominarlo correctamente.