React: Is using React.Memo in for all components a good way

Question

React gives a way to memoize the components using React.memo which actually stops the component re-render if there is no change in props.

import React, { memo } from 'react'; interface ComponentNameProps { } const ComponentName:React.FC<ComponentNameProps> = props => { const {} = props; return ( <div> </div> ) } export default memo(ComponentName)

Do we put all our component into memo, will it be a good practise?

React.memo is used to memoize heavy calculations. I don't think what you are trying to do is good practice. — Ayush Gupta
– Ayush Gupta, Commented Aug 20, 2021 at 7:18
This might be useful, checkout this answer stackoverflow.com/questions/53074551/… — Awais
– Awais, Commented Aug 20, 2021 at 7:21

e.a. · Accepted Answer · 2021-08-20 09:31:12Z

Well, if you use React.memo, everytime you use the component react is gonna run a compare function to see if the props have changed; so if redeclaring your function is less expensive, then you are hurting the performance, rather than improving it. so it's a tradeoff that sometimes is worth making, but not for every component.

Nitsan Cohen · Accepted Answer · 2021-08-20 07:20:15Z

No, it is not a good practice. In fact, overusing useMemo can hurt your application more (performance-wise) than the re-renders.

Please use wisely and with caution.

Collectives™ on Stack Overflow

React: Is using React.Memo in for all components a good way

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related