useMemo Hook ### ### Introducción ### El Hook useMemo es utilizado para memorizar valores calculados, optimizando el rendimiento al evitar recalculaciones costosas en cada renderización. Este Hook es particularmente útil cuando necesitas realizar cálculos intensivos o tienes componentes que dependen de datos complejos que no deben recalcularse en cada render. ### Sintaxis básica ### useMemo toma una función y una lista de dependencias, y solo recalcula el valor memorizado cuando alguna de las dependencias cambia. javascript import React, { useState, useMemo } from 'react'; function ExpensiveComponent({ a, b }) { // Calcula el valor memorizado const expensiveValue = useMemo(() => { return a + b; }, [a, b]); return <div>{expensiveValue}</div>; } function App() { const [count, setCount] = useState(0); return ( <div> <ExpensiveComponent a={1} b={2} /> <button onClick={() => setCount(count + 1)}>Incrementar Count</button> <p>Count es: {count}</p> </div> ); } ### Descripción del ejemplo ### En este ejemplo: - ExpensiveComponent utiliza useMemo para calcular el valor expensiveValue. - El cálculo solo se realiza cuando a o b cambian, no en cada renderización del componente. - Aunque App se renderiza cada vez que se incrementa count, el valor memorizado en ExpensiveComponent no se recalcula a menos que cambien a o b. ### Casos de uso ### useMemo es útil en varios escenarios, como: - Cálculos intensivos: Realizar cálculos costosos solo cuando cambian las entradas. - Renderizaciones condicionales: Evitar renderizaciones innecesarias de componentes hijos. - Filtrado y ordenamiento de listas: Memorizar los resultados para evitar repetir cálculos. ### Ejemplo avanzado ### Considera el caso de una lista filtrada de usuarios. javascript import React, { useState, useMemo } from 'react'; const users = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }, // Más usuarios... ]; function UsersList({ filter }) { const filteredUsers = useMemo(() => { console.log('Filtrando usuarios...'); return users.filter(user => user.name.toLowerCase().includes(filter.toLowerCase())); }, [filter]); return ( <ul> {filteredUsers.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> ); } function App() { const [filter, setFilter] = useState(''); return ( <div> <input value={filter} onChange={e => setFilter(e.target.value)} placeholder='Buscar usuario...' /> <UsersList filter={filter} /> </div> ); } ### Descripción del ejemplo avanzado ### En este ejemplo: - UsersList utiliza useMemo para memorizar la lista filtrada de usuarios, evitando recalcular la lista filtrada en cada renderización. - La consola mostrará 'Filtrando usuarios...' solo cuando el filtro cambie, optimizando el rendimiento. ### Cuándo no usar useMemo ### Evita el uso excesivo de useMemo. Úsalo solo cuando tienes pruebas claras de problemas de rendimiento. En la mayoría de los casos, React es eficiente en el manejo de actualizaciones de componentes por sí solo. ### Advertencias ### Aunque useMemo puede mejorar el rendimiento, también añade una capa de complejidad. Úsalo con precaución y asegúrate de que realmente está beneficiando el rendimiento de tu aplicación. [Placeholder para imagen sobre el uso de useMemo: Diagrama que muestra cómo useMemo evita recalcular valores en cada render, destacando el proceso de dependencia y memoización de resultados.]