While it is obvious why React does not perform React.memo to all its functional ponent by default, and we should ourself wrap our functional ponents 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 ponents based on different selectors like above */}
   </>
  );
};

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

Does it make sense to wrap all my child ponents 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 ponent which was paring custom props and store value passed as props to the ponent, so should we now manually always do React.memo while using useSelector in a ponent not receiving any props?

While it is obvious why React does not perform React.memo to all its functional ponent by default, and we should ourself wrap our functional ponents 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 ponents based on different selectors like above */}
   </>
  );
};

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

Does it make sense to wrap all my child ponents 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 ponent which was paring custom props and store value passed as props to the ponent, so should we now manually always do React.memo while using useSelector in a ponent not receiving any props?

• javascript
• reactjs
• react-redux
• react-hooks

1 Answer 1

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

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

Since the ponents 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 ponent, you shouldn’t count on that to prevent rendering.