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>Book title - {title}</div>
        <div>Author - {author}</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.

Web development and Automation testing

solutions delivered!!