React useMemo Hook

React’s useMemo hook is a powerful tool that allows you to optimize the performance of your component by only re-rendering it when certain values change.

useMemo is a hook that takes two arguments: the first is a function that returns a value, and the second is an array of dependencies. The hook will call the function and save the result, and will only call the function again if any of the dependencies have changed. This is useful when you have a component that is computationally expensive to render, but the result only depends on a few props or state variables.

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

import { useMemo } from 'react';

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

  return <div>{processedData.join(', ')}</div>;
}

In this example, the component renders a list of numbers that are double the original numbers, but the processing only occur when data changes.

It’s important to note that the second argument to useMemo should be a list of variables that you want to track for changes. If you don’t pass a second argument or if you pass an empty array, useMemo will only run once when the component mounts. And also it’s important to note that the result of useMemo hook should only used for rendering purpose. It’s not for updating the component state.

You can use useMemo hook in conjunction with useCallback hook, useMemo is used to memoize the function that passed to useCallback as a first argument, this could result in a better performance.

here are a few more examples of how you might use the useMemo hook in different scenarios:

Computing a derived value from props

import { useMemo } from 'react';

function MyComponent({data}) {
  const memoizedData = useMemo(() => data.filter(item => item.isValid), [data]);

  return (
    <ul>
      {memoizedData.map((item) => (
        <li key={item.id}>
          {item.name}
        </li>
      ))}
    </ul>
  );
}

In this example, the component uses useMemo to memoize the result of filtering the data prop, this means that the filter function only re-run when the data prop changes. this could be useful if the data prop is an array of large objects and the filter function is computationally expensive, using useMemo in this case could improve the performance.

Computing a derived value from state and props

import { useState, useMemo } from 'react';

function MyComponent({items}) {
  const [searchTerm, setSearchTerm] = useState('');
  const filteredItems = useMemo(() => items.filter(item => item.name.includes(searchTerm)), [items, searchTerm]);

  return (
    <>
      <input type="text" value={searchTerm} onChange={e => setSearchTerm(e.target.value)} />
      <ul>
        {filteredItems.map((item) => (
          <li key={item.id}>
            {item.name}
          </li>
        ))}
      </ul>
    </>
  );
}

In this example, the component uses useMemo to memoize the result of filtering the items prop based on a search term from the state. this means that the filtering function only re-run when the searchTerm state or `items

In summary, useMemo is a powerful tool that allows you to optimize the performance of your React components by only re-rendering them when certain values change. It can help you avoid unnecessary re-renders, which can improve the overall performance of your application. Keep in mind that you should only use it when the result of a computation depends on props or state that is unlikely to change often.

Computing a derived value from props

Computing a derived value from state and props

About Yogesh Koli