useShallowMemo

a React hook for memoizing objects

Install

• npm install use-shallow-memo or
• yarn add use-shallow-memo

Use

import useShallowMemo from 'use-shallow-memo';

export default function MyComponent({ data }) {
  const memoizedData = useShallowMemo(data);

  // Even though `data` changes every render, `memoizedData` does not.
  useEffect(() => {
    alert(memoizedData.message); // Hello world!
  }, [memoizedData]);

  // ...
}

<MyComponent
  data={{
    message: 'Hello world!',
  }}
/>