UseMemo

1. Role of useMemo

• Components are structured to re-render whenever state changes or parent components render

• However, too frequent re-rendering causes poor performance in apps

• React Hooks are methods that allow function components to manipulate state and use optimization features

• Among them, there are also Hooks for rendering optimization → useCallback and useMemo are Hooks that perform that role

2. What is useMemo?

• useMemo is a Hook used when you want to reuse specific values

• For example, if there's code in the component below that passes the value prop to a function called calculate to get the result value, then outputs it as a <div> element:

  function Calculator({ value }) {
    const result = calculate(value);
    return (
      <>
        <div>{result}</div>
      </>
    );
  }

• If the above calculate function takes a long time to return, the component will continuously call this function every time it renders, increasing loading time and ultimately giving users a poor experience

  import { useMemo } from 'react';
  const result = useMemo(() => calculate(value), [value]);
  return (
    <>
      <div>{result}</div>
    </>
  );

• The value of the above Calculator component is a kind of value, and if this value doesn't keep changing every time it renders & if the value can be stored somewhere and retrieved for reuse, there's no need to call the calculate function

• Here you can use the useMemo Hook

• By calling useMemo to wrap calculate, when comparing previous rendering with newly constructed rendering, if the value is the same → previous rendering's value can be reused (Memoization)

3. What is Memoization?

• Programming technique that stores the result value of previously performed operations in memory and reuses them when the same input comes in

• If you use this memoization appropriately, there's no need for duplicate operations, so app performance can be optimized → useMemo utilizes this

• You can implement logic using memoization concept directly, but it's much more convenient because useMemo Hook call handles logic implementation for you