Compiler does not memoize inline function components in props

[Romej]

We recently had a problem where a component was rerendering so many times that it was consuming huge amounts of memory and crashing the app. That was in a project that does not use the react compiler yet.

Wrapping 2 functions that were passed by props in useCallback ultimately fixed it.

I was curious to see if the compiler would solve the problem, so I ran our app with the compiler on the tag that had the memory problem.

Unfortunately, it did not fix it and the component rerendered several times like it used to.

However, after I made a small change, the compiler fixed the problem as I originally expected :

const [showingArchived, setShowingArchived] = useState(false);

+ const callLogRenderer = props => <CallEventItem {...props} showingArchived={showingArchived} />;
+ const chatMessageRenderer = props => <MessageEventItem {...props} showingArchived={showingArchived} />;

return (
    <ActivityList
-     callLogRenderer={props => <CallEventItem {...props} showingArchived={showingArchived} />}
-     chatMessageRenderer={props => <MessageEventItem {...props} showingArchived={showingArchived} />}
+     callLogRenderer={callLogRenderer}
+     chatMessageRenderer={chatMessageRenderer}
    />
)

Is it expected that the compiler does not memoize inline function components in props?