Entender las diferencias entre dos hooks fundamentales de React: useState() y useMemo(), es esencial para mejorar el rendimiento de tu aplicación.
El hook useState() se utiliza para almacenar y actualizar datos que pueden cambiar con el tiempo, mientras que useMemo() se utiliza para memorizar y reutilizar valores calculados. Aunque ambos son hooks, tienen propósitos completamente diferentes.
useState() en React JS?useState() es un hook que te permite agregar y manejar estado en componentes funcionales. El estado es información que puede cambiar con el tiempo y cuando cambia, React vuelve a renderizar el componente.
A continuación, se muestra la sintaxis básica de useState():
const [variable, setVariable] = useState(valorInicial);Significa que estás creando una variable con estado en React.
variable: guarda el valor actual del estado.setVariable: es la función para cambiar ese valor.useState(valorInicial): define el valor inicial del estado.Cada vez que se actualiza la variable de estado, React vuelve a renderizar el componente y se actualiza el valor en la interfaz de usuario.
import { useState } from 'react'; // Importamos useState de React
function Contador() {
// Creamos una variable de estado llamada "count" con valor inicial 0
const [count, setCount] = useState(0);
return (
<>
<p>Has clickeado {count} veces</p>
<button onClick={() => setCount(prevCount => prevCount + 1)}>
Incrementar
</button>
</>
);
}
export default Contador;count guarda el número de clickssetCount es la función para actualizar ese númerouseMemo() en React JS?useMemo() es un hook que memoriza el resultado de un cálculo costoso y lo reutiliza en lugar de recalcularlo en cada render. Es como guardar el resultado de una operación compleja para no tener que hacerla de nuevo.
A continuación, se muestra la sintaxis básica de useMemo():
const resultado = useMemo(() => {
// cálculo costoso aquí
return valorCalculado;
}, [dependencias]);Significa que useMemo() guarda el resultado de un cálculo para no volver a hacerlo cada vez que el componente se renderiza.
La función dentro de useMemo(() => { ... }) hace el cálculo.
El array [dependencias] indica cuándo volver a recalcular (solo si cambian esas variables).
// Importamos useState y useMemo de React
import { useState, useMemo } from 'react';
// Componente que filtra productos basados en la búsqueda
function ListaFiltrada() {
const [busqueda, setBusqueda] = useState(''); // Estado para la búsqueda
// Lista grande de productos
const productos = [
'Laptop', 'Mouse', 'Teclado', 'Monitor', 'Auriculares',
'Webcam', 'Micrófono', 'Mousepad', 'USB', 'HDMI'
];
// useMemo memoriza el filtrado
const productosFiltrados = useMemo(() => {
console.log('Filtrando productos...');
// Retorna los productos que contienen la búsqueda
return productos.filter(p =>
p.toLowerCase().includes(busqueda.toLowerCase()) // Filtrar productos que contienen la búsqueda
);
}, [busqueda]); // Solo recalcula cuando cambia "busqueda"
return (
<>
<input
type="text"
value={busqueda}
onChange={(e) => setBusqueda(e.target.value)}
placeholder="Buscar producto..."
/>
<ul>
{
productosFiltrados.map((producto, i) => (
<li key={i}>{producto}</li>
))}
</ul>
</>
);
}busqueda cambia[valor, funciónParaActualizarlo].En el siguiente ejemplo se logra ver como useState guarda el estado del contador,
mientras que useMemo guarda el resultado del cálculo del doble del contador.
// useState: contador simple
const [count, setCount] = useState(0);
// useMemo: cálculo optimizado
const doble = useMemo(() => count * 2, [count]);Otro ejemplo para ver la diferencia entre useState y useMemo es el siguiente:
import { useState, useMemo } from 'react';
function EjemploCompleto() {
// useState: para manejar el estado
const [numero, setNumero] = useState(5);
const [color, setColor] = useState('blue');
// useMemo: para optimizar cálculo factorial
const factorial = useMemo(() => {
console.log('Calculando factorial...');
let resultado = 1;
for (let i = 1; i <= numero; i++) {
resultado *= i;
}
return resultado;
}, [numero]); // Solo recalcula si "numero" cambia
return (
<div>
<h2>Cálculo de Factorial</h2>
{/* useState en acción */}
<input
type="number"
value={numero}
onChange={(e) => setNumero(Number(e.target.value))}
/>
{/* useMemo muestra el resultado memorizado */}
<p>Factorial de {numero} = {factorial}</p>
{/* Cambiar color NO recalcula el factorial */}
<button onClick={() => setColor(color === 'blue' ? 'red' : 'blue')}>
Cambiar Color
</button>
<div style={{ width: '100px', height: '100px', backgroundColor: color }} />
</div>
);
}numero recalcula el factorial ✅color NO recalcula el factorial ✅ (usa el valor memorizado)useMemo, el factorial se calcularía en cada render, lo cual es innecesario.Nunca modifiques la variable del estado directamente (count = ...), porque React no detectará el cambio y no volverá a renderizar el componente.
Siempre usa la función que te da useState (en este caso setCount) para actualizar el valor correctamente.
// INCORRECTO: modificar el estado directamente
count = count + 1; // ❌
// CORRECTO: usar la función setter
setCount(count + 1); // ✅Si olvidas agregar las dependencias correctas (como valor), useMemo no se actualizará cuando esas cambien, y el resultado quedará desactualizado.
Asegúrate de incluir todas las variables usadas dentro del cálculo en el array de dependencias.
// INCORRECTO: olvidar las dependencias
const resultado = useMemo(() => calcular(valor), []); // ❌
// CORRECTO: incluir todas las dependencias
const resultado = useMemo(() => calcular(valor), [valor]); // ✅