CODEWITHSUNDEEP
reactjs
Roopak Puthenveettil
Roopak Puthenveettil

Reputation: 1475

React.memo() vs React functional component

I use a lot of React functional components in my application. Is this a right time to consider replacing my functional components with React's new React.memo() API? Will it really improve the performance? If i use React.memo() instead of functional components every time React has to check whether my new props and previous props are the same or not, and then needs to update my component. Will it be a burden for React and decrease my performance?

Any suggestions ?

Upvotes: 3

Views: 2156

Answers (1)

Keith Brewster
Keith Brewster

Reputation: 3652

You won't have to replace your functional components, as memo is a higher order component you wrap around your existing component. It will improve performance because you will no longer have any unnecessary re-renders of your functional components if their props haven't changed. From the React docs (https://reactjs.org/docs/react-api.html#reactmemo):

If your function component renders the same result given the same props, you can wrap it in a call to React.memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.

You don't have to worry about "replacing" your component, you can just wrap the export function like this

export default React.memo(YourComponent);

Upvotes: 12

Related Questions