useMemo in react

React memo is a higher order component. memo function takes a component as first argument and returns memorized component. memo avoids unnecessary renderings if component props have not changed. In below example, Book component will not re-render if title and author has not changed. In class based components, pure component is used to implement this functionality.

export function Book({ title, author }) {
    return (
      <div>
        <div>Book title - {title}</div>
        <div>Author - {author}</div>
      </div>
    );
  }
  export const MemoizedBook = React.memo(Book);

memo function does shallow comparison of props objects and returns true if they are same. But you can write a custom comparison function which can be passed as second argument to memo function.