Fast Guide to Using React.memo

What is React.memo?

React.memo is a Higher Order Component that will wrap the component you want to memoize. It checks if the props have changed, if so it will continue with the re-render, if not then it will stop the re-render and all recursive renders of its child components.

It is important to understand that it will only do a shallow comparison of your props. So functions and objects will be considered new props even if they haven't changed. This is due to reference equality for objects and functions.

Side note: React is pretty smart, if your state is an object. React does some magic behind the scenes and knows that your object in state has not changed. It does not do this with normal objects though.

// if you pass this state, react will not re-render your component unless state updated
const [data, setData] = useState({someData: true});
// if you pass this as a prop, your memoized component will still re-render
const someObject = {someObj: true}

Why do we need it?

React.memo is useful when a parent component has re-rendered due to some state or prop change and a child component that lives inside that parent component does not make use of any of those changes. The child component should not have to re-render if it is going to return the same output.

How to use memo.

// UnrelatedComponent.js
function UnrelatedComponent () {
  return <h2> Footer Content... </h2>
}

// before
export default UnrelatedComponent
// after, now the component will not re-render unless its props have changed.
export default React.memo(UnrelatedComponent)

// App.js
function App () {
  const [count, setcount] = useState(0)

    return (
     <div>
           <h2>{count}</h2>
           <UnrelatedComponent />
     </div>
    )
}
export default App

If count updates and UnrelatedComponent is not using memo, then it will re-render even though it does not make use of the count state.

Some Gotchas

A few good to knows when using react.memo.

• If you are passing in a function, use the useCallback hook to memoize the function or else it will re-render due to reference type equalities.
• If you are passing in an object, use the useMemo hook to memoize the object or else it will re-render due to reference type equalities.
• React.memo takes in a function as a second parameter that has the previous and next props so you can have more fine grain control on what props should trigger a re-render.
• If your memoized component is using the children prop, it will always re-render due to the prop always being a reference.
• If you are using a function that should be updated every time a re-render happens, like for example a date function, or a random calculation, then you should not memoize the component.

More Resources: https://dmitripavlutin.com/use-react-memo-wisely/