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, Aug 20 '21 at 07:18
This might be useful, checkout this answer https://stackoverflow.com/questions/53074551/when-should-you-not-use-react-memo — Awais, Aug 20 '21 at 07:21

score 0 · Answer 1 · answered Aug 20 '21 at 09:31

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.

score -2 · Answer 2 · answered Aug 20 '21 at 07:20

-2

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.

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

2 Answers2