[Compiler Bug]: 'use no memo' does not apply recursively

[yepitschunked]

What kind of issue is this?

• React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
• babel-plugin-react-compiler (build issue installing or using the Babel plugin)
• eslint-plugin-react-hooks (build issue installing or using the eslint plugin)
• react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAgHgBwjALgAgBMEAzAQygBsCSoA7OXASwjvwGEJKoBbOgGTIAjBJTAAKYPhIQI+AL4BKfMAA6bfAHIoYBPjpyeCHhE0BudfnxxWYAp259BIygCUEdYjAQx8AXnxJfCEyXyV-AD4VSyt8b1xYNgAeQiYANwjgEJh5JIB6VIyLDXliq3jEji5eAWFRd08fH2L5EAAaEBs6EiYAcxQQJh5sPHxcAE9MPSkABW5epjoAeUxmWwVpGAgeLRCXAFpMecX97zJGfZthpkofAqY7c3V1SRi8vKvMG7I1ugBZCDEZD4VQgMiUSig9TyfBgH4PHoIMD4OZQBbLVYsOhgRRmdrgAAWEAA7gBJOi4Hx0cFgFDkMQIeRAA

Repro steps

1. Write a render prop function which happens to contain nested functions with component-like names
2. Enable react compiler
3. App crashes due to hook errors because the render prop function got compiled. (This is expected behavior)
4. Try to fix the problem by applying 'use no memo' to the toplevel function
5. Nested function continues to be compiled; 'use no memo' needs to be applied to all nested component-like function names

As a side note, the component-hook-factories rule does not detect this error: https://eslint-online-playground.netlify.app/#eNp9U01P4zAQ/Ssjn4rUJvcuVCuxu9rDSou4Yg5uMikJjh38gYqi/HfGHykpVFziyczzzHtvkpFZU5V4FP0gsegs27LGq8q1WsGdMKjc6gpGrgBO6dunVtZzFqAsoSiKEE9chcOg80bBdcRBufvBVay0/aCNgxEqqRX+lthTd5igMboHzgyKynEWkHiMyBob4aVbTNbS9+qf2KO0qxEarWHKPCqtrFsC7lHVaNDADRB0L0yA3uxm1jPJun3djVSdrssQElfSEZ8ZcaFlEMTWDK1slStoctMeknUniUS9VXgbSx8S040y3eCM+uQLnZ0hPzOms8t69Oav1s/2TvpDq84bboaY3ETU5inAgo+fXFxSWgWBD8mJzmYJtjBY6Z62UmO9TsXsFrnhJdrtxzvAi9cupB6IhjHacLYmRrX2e4mcPeYG5GaO5vOzltP0Rgp3gQJ3NJQ77qRQBy8O+H8IH0MiE/LcDcJYNF/z3GHViz8oaJOZ/VzgrrPHLTjjkebMucDxPEpn4v7I1RXthFY/iOqZmNDStaK1R1c4c28DKd9S1Oua/CJHUqHG1184BFGqapGWczLyfOHhKpmAlv6DWX3e8bfFix/AEp//zolN7yFnXC0=

We ran into this while compiling a project that uses react-virtualized. react-virtualized takes a render prop which gets called as a function rather than rendered as a component. Our render prop function crashed when it got compiled and passed into this prop.

How often does this bug happen?

Every time

What version of React are you using?

18.3.1

What version of React Compiler are you using?

1.0.0