https://blog.battlefy.com/how-to-escape-react-hooks-hell-a66c0d142c9e useMemo component

useMemo component.js

// Good useMemo usage
const NormalComponent = ({ count }) => {
  const costlyValue = useMemo(() => costlyFunction(count), [count]);
  return <p>NormalComponent {costlyValue}</p>;
};

export default ({ count }) => {
  // Slow component
  const SlowComponent = () => {
    const costlyValue = costlyFunction(count);
    return <p>SlowComponent {costlyValue}</p>;
  };

  // Bad useMemo usage
  const MemoizedComponent = useMemo(() => () => {
    const costlyValue = costlyFunction(count);
    return <p>MemoizedComponent {costlyValue}</p>;
  }, [count]);

  return <>
    <SlowComponent />
    <MemoizedComponent />
    <NormalComponent count={count} />
  </>;
};