Removal of manual React.memo wrapping

[ksjogo]

Hi,
#39 and #16 covered a bit of this as considering keeping useCallback/useMemo as is.
But I am wondering about wrapping with memo.
Running the compiler over manually memoized components with exported version wrapping them in memo() will result in these components showing up as "Memo *" "Memo":

As far as I understand the manual memos could be dropped as the compiled version is essentially doing the same already and would return the fully cached version on no prop change?

But for now the compiler is only touching the code within the function component and not potential (export) wrappers?

Might that happen in the future?

[condward]

I'm not sure if the compiler Memo showing up in React Dev Tools is reliable. In a project of mine it shows there as

and it re renders all 3 GroupCovers when I move one, but if I add memo manually on GroupCover component it will just re render the one I move. Dont know if its because I am using React-Konva or Zustand 5 subscription. All props are primitives.

export const GroupCovers: FC = () => {
  const groups = useMainStore((state) => state.groups);

  return (
    <>
      {groups.map((group) => (
        <GroupCover
          key={group.id}
          id={group.id}
          titleText={group.title.text}
          subtitleText={group.subtitle.text}
          x={group.pos.x}
          y={group.pos.y}
          dir={group.title.dir}
          subDir={group.subtitle.dir}
          scaleX={group.scale.x}
          scaleY={group.scale.y}
        />
      ))}
    </>
  );
}; 

[guillaumebrunerie]

The compiler doesn’t do the same thing as React.memo. From what I understand, it doesn’t directly prevent components from rerendering (unlike React.memo), but it makes rerendering of such components very fast, as everything inside should be memoized. So it’s not the component itself that is memoized, it’s everything inside it.

[condward]

oh, I do notice performance issues without the manual memo, so I need to add it back.

[guillaumebrunerie]

oh, I do notice performance issues without the manual memo, so I need to add it back.

I guess that's possible depending on how the compiler optimized the component. If it does a worse job than React.memo, maybe that's worth an bug report in the React repo.

[ksjogo]

Ah, good point and might connect to wanting to keep the memo(X)
Are you doing expensive things in hook calls? As the compiled component will need to call the hooks to follow the rules and then return the cached bits.
Where as the memo(X) would skip these.

[MrFlashAccount]

At this moment React compiler does not optimize re-renders within functions like map: https://codesandbox.io/p/devbox/k3dvwn?file=/src/App.tsx:77,1-78,1 . To optimize these cases, we need to manually wrap individual item into memo: https://codesandbox.io/p/devbox/k3dvwn?file=/src/App.tsx:80,1-81,1

[MrFlashAccount]

Here's the minimal repro for that case in the playground: https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAkjggLZgAUADjBLWAJRHAA6xRMCOsxAEwCGOIQDoKQ2tWrAimIRQREAvqwC8APiIAeMpSIBrBAE91wBUpXzFCc5YTWA9JuYBuTis6c4hMDlJyCiJ1IiUKCGoMbHxCQMo6BiZWDi4ePhhiHQALAGYiOAAbITAwADlbdXYQcgAPHABaMGDaBoAGMQBWas1gekYwMQcVHSc8zQ9MNUmQFSA

As you can see, the _temp function is not memoized internally

[MrFlashAccount]

An amusing observation is that if we perform a second pass over the _temp function, it becomes memoized.
Link: https://playground.react.dev/#N4Igzg9grgTgxgUxALhAHQHYDMobgFwEsIMACAfXwQFsAHACnwAYBKU4TU0uEsfd0hgCG1BKQC+pALylmAbk6kYCfLDIAeAJJVqpANYIAnlODDRkswhOXJAegB8CjOMwhxQA

Edit: here's an answer from compiler team on this statement: #51 (comment)

TLDR: playground sometimes was producing different output compared to the compiler, due to differences in the configuration. It's fixed recently and the example above no longer have memoization

[condward]

I had the same thing happening to me. Should the react extension stop showing "memo" for that case, because is misleading?

[guillaumebrunerie]

I had the same thing happening to me. Should the react extension stop showing "memo" for that case, because is misleading?

Well, both are different kinds of memoization. React.memo memoizes the component from the outside, while the React compiler memoizes it from the inside. They make different tradeoffs. But yes, it's confusing, maybe the Devtools should use a more different label for components memoized by the React compiler?