React:memo

lastmod 2023-03-09created 2023-03-091 edits

About

const MyComponent = React.memo(function MyComponent(props) {
  /* props를 사용하여 렌더링 */
});

React.memo is a Higher Order Component.

If your component renders the same result given the same props, you can wrap it in a call to React.memo so that the result is memoized, which can give a performance boost in some cases. In other words, React skips rendering the component and reuses the last rendered result.

React.memo only checks for prop changes. If the function component wrapped in React.memo uses the useState, useReducer, or useContext hooks in its implementation, it will still re-render when state or context changes.

By default it only does a shallow comparison of complex objects in props. If you want different comparison behavior, provide a custom comparison function as the second argument.

See also

• React

Favorite site

• Using React.memo() wisely | TOAST UI :: Make Your Web Delicious!