React Memoization Methods
Pure components created with React.memo
will not re-render unless their props or state changes.
function Decoration() {
return <div className="decoration">⛵️</div>;
}
const PureDecoration = React.memo(Decoration);
export default PureDecoration;
The useMemo
hook allows us to memoize expensive computations, like Svelte's $derived
.
const allPrimes = React.useMemo(() => {
const result = [];
for (let counter = 2; counter < selectedNum; counter++) {
if (isPrime(counter)) {
result.push(counter);
}
}
return result;
}, [selectedNum]);
The useCallback
hook is the same as useMemo
, but for functions instead of objects.
const handleMegaBoost = React.useCallback(() => {
setCount((currentValue) => currentValue + 1234);
}, []);