React now offers a higher-order component React.memo() to improve user interface. When React.memo() wraps a component in it, it memorizes the rendered output then skips the unnecessary rendering.

 I will the situations when React.memo() improves the performance, and  it also warns when its usage is useless.

While deciding to update DOM, React first renders our component, then it compares the result with the previously rendered result. If the results are different then react updates the DOM. Comparing the currently rendering and previously rendered results is fast, but we also can speed up this process under some circumstances.

When a component is wrapped I n React.memo() , It renders the component and stores the results in the memory. Before the next render, if the new properties (props) are same, react uses the memorized result skipping the rendering, which saves time.

Let’s take one example where memorization is in real time action.

Here a functional component Movie is wrapped inside React.memo():

export function Movie({ title, releaseDate }) {

  return (

    <div>

      <div>Movie title: {title}</div>

      <div>Release date: {releaseDate}</div>

    </div>

  );

}

export const MemoizedMovie = React.memo(Movie);

React.memo(Movie) returns a new component that has been memorized(MemorizedMovie). It outputs the same content as the original component (Movie), but there is one difference. The rendered content the new component is memorized. As long as the title or releaseDate properties are the same between rendering, React reuses the memorized content and saves lot of time.

For more details: https://dmitripavlutin.com/use-react-memo-wisely/