Should I wrap all my components with React.memo() if it is not expecting any props?

user_7318037 0
Viewed 4758

While it is obvious why React does not perform React.memo to all its functional component by default, and we should ourself wrap our functional components as and when needed.

In my case, I have a big react project with a structure like this:

const MyBigApp = () => {
  const shouldShowX = useSelector(getShouldShowX);
  const shouldShowY = useSelector(getShouldShowY);
  // Many more selectors

  return (
    <>
      {shouldShowX && <ComplexComponentX />}
      {shouldShowY && <ComplexComponentY />}
      {/* many more components based on different selectors like above */}
   </>
  );
};

All my business logic is inside redux and the components use useSelector internally to get data from the store.

Does it make sense to wrap all my child components with React.memo, as a change in any selector at root level causes my entire app to re-render?

Earlier with connect we were automatically getting a memoized component which was comparing custom props and store value passed as props to the component, so should we now manually always do React.memo while using useSelector in a component not receiving any props?

react-redux react-hooks reactjs javascript
1 Answers

I would argue that you should consider using React.memo for those child components that don't accept any props. I highly recommend this article: https://dmitripavlutin.com/use-react-memo-wisely/

2.1 Component renders often with the same props
The best case of wrapping a component in React.memo() is when you expect the functional component to render often and usually with the same props.

Since the components you're asking about don't accept any props, that means the props will never change. Therefore, it stands to reason that using React.memo could avoid render cycles. Note this important caveat from the same article:

5. React.memo() is a performance hint
Strictly, React uses memoization as a performance hint.

While in most situations React avoids rendering a memoized component, you shouldn’t count on that to prevent rendering.

user_2301670
Related