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);
}, []);