useMemo is a React hook that memoizes the result of a computation.
It only recalculates the value when one of its dependencies changes, which can improve performance for expensive calculations.
useMemo is a React Hook that memoizes the result of a computation.
It only recalculates the memoized value when one of its dependencies has changed.
This optimization helps to avoid expensive calculations on every render.
It's particularly useful for expensive operations like filtering large arrays, complex calculations, or creating objects that are used as dependencies in other hooks.
import React, { useMemo, useState } from 'react';
function ExpensiveComponent({ items }) { const [filter, setFilter] = useState('');
// This expensive calculation only runs when 'items' or 'filter' changes const filteredItems = useMemo(() => { console.log('Filtering items...'); // This will only log when dependencies change return items.filter(item => item.name.includes(filter)); }, [items, filter]);
return ( <div> <input value={filter} onChange={(e) => setFilter(e.target.value)} placeholder="Filter items..." /> <ul> {filteredItems.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> </div> ); }