useMemo

useMemo is a hook in React that allows you to memoize a value. This means that the value will only be recalculated if one of the dependencies has changed. This can be useful in a number of situations, such as:

1. When you have an expensive computation that you don’t want to perform on every render.
2. When you want to avoid rendering a child component unnecessarily.

Here’s an example of how you might use useMemo:

const MyComponent = ({ data }) => {
  const processedData = useMemo(() => {
    // Perform expensive computation here
    return data.map(d => d * 2);
  }, [data]);

  return <ChildComponent data={processedData} />;
};

In this example, the processedData will only be recalculated if the data prop changes. This can help to improve the performance of your component.

You should use useMemo when you have an expensive computation that you want to perform only if one of the dependencies has changed. This can help to avoid unnecessarily re-creating values and improve the performance of your component.

Difference between useMemo and useCallback ?

useMemo and useCallback are similar in that they are both performance optimization hooks in React. They are designed to help you avoid unnecessary re-renders and improve the performance of your component.

The main difference between the two is that useMemo is used to memoize a value, while useCallback is used to memoize a function.

Here’s an example of how you might use useMemo:

const MyComponent = ({ data }) => {
  const processedData = useMemo(() => {
    // Perform expensive computation here
    return data.map(d => d * 2);
  }, [data]);

  return <ChildComponent data={processedData} />;
};

And here’s an example of how you might use useCallback:

const MyComponent = ({ onClick }) => {
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []);

  return <button onClick={handleClick}>Click me</button>;
};

In the useMemo example, the processedData value will only be recalculated if the data prop changes. In the useCallback example, the handleClick function will only be re-created if the component re-renders with a different onClick prop.

You should use useMemo when you have an expensive computation that you want to perform only if one of the dependencies has changed. You should use useCallback when you want to avoid creating a new function on every render, such as when you pass a callback prop to a performance-critical child component.

When to use React useMemo() ?

You should use useMemo when you have a value that is computationally expensive to compute, and you want to avoid re-computing it on every render unless its dependencies have changed.

For example, when you have a component that renders a list of items and you want to filter the list based on a search input, you can use useMemo to create a memoized version of the filtered list. This way, the filtered list only gets recomputed when the search input changes and not every time the component re-renders.

It is also useful when you have a value that is used multiple times in the component and it is expensive to compute or it is not a pure function.

Keep in mind that useMemo is not a replacement for state, but should be used in addition to state when you need to calculate a value based on props or state and avoid recalculating it when nothing has changed.