React ~ Hooks ~ Performance - rohit120582sharma/Documentation GitHub Wiki

React.memo

React.memo is a Higher-order component that lets you skip re-rendering a component if its props haven’t changed.

The way it does this is when a component is wrapped in React.memo(), React will render the component and memoize the result. On subsequent re-renders, React will perform a shallow comparison (===) between the previous props and the new props - if the props haven’t changed, React will skip rendering the component and reuse the last rendered result.

export default React.memo(Component);

// OR

export default React.memo(Component, (prevProps, nextProps) => {
    // If true, then don't re-render
    // If false, then re-render
    return prevProps[propName] === nextProps[propName];
});

React.useCallback

useCallback returns a memoized function whose reference will persist across renders. What this means is that any function you create with useCallback won’t be re-created on subsequent re-renders.

It takes two arguments, a function and an array of values that the function depends on. The memoized function it returns will only change if one of the values in the dependency array change.

const memoizedCallback = React.useCallback(() => {
    doSomething(a, b);
}, [a, b]);

React.useMemo

useMemo returns a memoized value and allows you to apply memoization to any value type (not just functions).

useMemo takes two arguments, a function and an array of values that the function depends on. It returns a value that will be computed on the initial render and whenever any of the values in the dependency array change.

const memoizedValue = React.useMemo(() => {
    return computeExpensiveValue(a, b);
}, [a, b]);

Example

function NthFib({ count, increment }) {
    const fib = React.useMemo(() => {
        return calculateFib(count);
    }, [count]);

    return (
        <div className='container'>
            <h2>Nth Fib</h2>
            <p>The <b>{suffixOf(count)}</b> number in the fibonacci sequence is <b>{fib}</b>.</p>
            <button onClick={increment}>Next number</button>
        </div>
    );
}

export default React.memo(NthFib);

function NthPrime({ count, increment }) {
    const prime = React.useMemo(() => {
        return calculatePrime(count);
    }, [count]);

    return (
        <div className='container'>
            <h2>Nth Prime</h2>
            <p>The <b>{suffixOf(count)}</b> prime number is <b>{prime}</b>.</p>
            <button onClick={increment}>Next prime</button>
        </div>
    );
}

export default React.memo(NthPrime);

function App() {
    const [fibCount, setFibCount] = React.useState(1);
    const [primeCount, setPrimeCount] = React.useState(1);

    const add10 = React.useCallback(() => {
        setFibCount((c) => c + 10);
        setPrimeCount((c) => c + 10);
    }, []);
    const handleReset = React.useCallback(() => {
        setFibCount(1);
        setPrimeCount(1);
    }, []);

    const incrementFib = React.useCallback(() => {
        setFibCount((c) => c + 1);
    }, []);
    const incrementPrime = React.useCallback(() => {
        setPrimeCount((c) => c + 1);
    }, []);

    return (
        <React.Fragment>
            <button onClick={add10}>Add 10</button>
            <button onClick={handleReset}>Reset</button>
            <hr />
            
            <NthFib count={fibCount} increment={incrementFib} />
            <hr />
            
            <NthPrime count={primeCount} increment={incrementPrime} />
        </React.Fragment>
    );
}