useMemoized is a React hook designed for cases where heavy computations rely on complex dependency arrays. Unlike useMemo, it caches and returns values based on the memoized state of dependency arrays, making it ideal for scenarios where you need to avoid recalculating expensive results.
- Memoizes results based on the exact state of dependency arrays.
- Lightweight, no dependecies
Avoid using useMemoized for simple calculations, as it can increase memory usage unnecessarily due to caching. Use it only when the performance benefits outweigh the additional memory overhead.
Install via pnpm, npm, or yarn:
npm i react-use-memoized
import { useMemoized } from 'react-use-memoized';
const MyComponent = () => {
const memoizedValue = useMemoized(() => {
// Your heavy calculation here
}, [dependency1, dependency2]);
return <div>{memoizedValue}</div>;
};