Home
Basics
Introduction Setting up environment First Component JSX Component lifecycle Class Based Components Function Based Components Props State Hooks useState hook useEffect hook Events Server requests CSS in React Router third party JavaScriptAdvanced
useContext hook useRef hook useReducer hook Memo useCallback hook Custom Hooks React and ReduxMiscellaneous
React Third Party Components Html templates in React React Interview QnAuseMemo 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.Web development and Automation testing
solutions delivered!!