How do I use memoization in React?

How do I use memoization in React?

Memoization in React is a technique to optimize performance by caching the results of expensive function calls. You can use the useMemo and useCallback hooks for this.

Can you give me an example of using useMemo?

Sure! Here's a simple example:

const expensiveCalculation = (num) => {
  // some expensive calculation
  return num * 2;
};

const MyComponent = ({ number }) => {
  const memoizedValue = useMemo(() => expensiveCalculation(number), [number]);
  return <div>{memoizedValue}</div>;
};

What about useCallback? How is it different?

useCallback is used to memoize functions. It returns a memoized version of the callback that only changes if one of the dependencies has changed. This is useful to prevent unnecessary re-renders.

Can you show me an example of useCallback?

Absolutely! Here's an example:

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return <button onClick={increment}>Count: {count}</button>;
};