Memoization

• Memoize value -> React.useMemo()
• Memoize function -> React.useCallback()
• Memoize component -> React.memo()
• References
  • https://stackoverflow.com/questions/66429202/what-are-production-use-cases-for-the-useref-usememo-usecallback-hooks
  • https://stackoverflow.com/questions/71265042/what-is-usecallback-in-react-and-when-to-use-it
  • https://stackoverflow.com/questions/53074551/when-should-you-not-use-react-memo
  • https://www.youtube.com/watch?v=YP2f-ErXG_M&list=PLC3y8-rFHvwg7czgqpQIBEAHn8D6l530t

useMemo

function FactorialDisplay({ num }) {
  const computeFactorial = (n) => {
    console.log('Computing factorial...');
    if (n <= 1) return 1;
    return n * computeFactorial(n - 1);
  };
 
  const factorial = useMemo(() => computeFactorial(num), [num]);
 
  return (
    <div>
      <p>Factorial of {num} is {factorial}</p>
    </div>
  );
}

useCallback

• memoize a function, returning the same function instance unless one of its dependencies has changed
• useful for passing stable callback functions to child components, which can help prevent unnecessary re-renders

memo

• lets you skip re-rendering a component when its props are unchanged
• Syntax:

const MemoizedComponent = memo(SomeComponent, arePropsEqual?)

• Example:
  • <Greeting/> gets rendered only when name is entered

function MyApp() {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <>
      <label>
        Name{': '}
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Address{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>
  );
}
 
const Greeting = memo(function Greeting({ name }) {
  console.log("Greeting was rendered at", new Date().toLocaleTimeString());
  return <h3>Hello{name && ', '}{name}!</h3>;
});

useMemo vs useState+useEffect

• https://stackoverflow.com/questions/56028913/usememo-vs-useeffect-usestate