[Compiler Bug/Discussion]: `react-hooks/preserve-manual-memoization` Questions

[cpojer]

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-compiler (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/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEAZmgDZ4IwByEAJgmMTBBgQOQACAdgNYBeAdwD0cXAiElylGvTAA6AFZg2AbgA6XTDnwEAyngCGcHgBoCwAgDV9RngQC+TFu279hYQ8dUatuQhYAlBCIAeQAjBQQ4PDMoMAQAUSIiKJiCOIQAWQQMCFj4oKIHJ1Y2GAQjPG9NbD9zAgBzGAMsAAsAR1J8hAAFAwa0LgM8NAguADFmhowELkJHImZS8sqAWnLSAwBPIVaICB55JWrfHQsAISg8PDHixec2OTkhKDQhS+uxuTwwAA8T2pnAgAKQgYQAMmgPAB9co4MBoG4wLYAEh4CC2dyW7Ge0OhDVmlGGCFoeKEoIhULwsIQ8MRuC2ciaLQ6pG+ynUNW0-hBYMhHgAilBKJiFtjHkI8QSuESKKToeS+VShSKmc02p12QDuQQgnSkVsKfy8ABJCise6lZ56iAIg1GqlmnLs-6cjSiLgeAiiKBzAgAXgIAEYAAxumW-HV4LZYBC64IIPBwVoOjzjLgB+N4WBcAAqMYQAB4NAQCNHYxAihk+gMhiMxpN+jM5hoAHwAbTKCaTrTYAF1wwhI3V6EQDFByMRfdFRhnU3gABTAEsEcopHuFEwruG2+nIrdcezIczb7vJwoAfmPhXCkWihcKieT8-TBAAPgQuBPSK3OaWd3aDLHvONL6gyaIYpy9gAJQnhm3pjF6Fi0MMBhmK0BhgFQQ5pFC4IQAYtCDA02G-GkpAEbQpFpGuT6tMU-orqW1b9IMwyzo20yzIQha8pSgrCvufHGqBu4GhBWytgQC5MaWjTqqyAAGslyUwTbccJVKiYByIELcNo6VsKlyRwBgwA0UDNngAAiwSDIis5gDJ8GqapPpzMeFjlggx5qCAJpzAAhH5DjGW5sCQDAnllgWvkgPoMDEX5ZijuO5CWAYpDCseX6kKQoUua50FhQQHC0T2BhhKQCALlgtEwOMdGVdVx54DAwpmO0glbFQBgzHF84qsifmwcuhWuQQaC0BoJWlgoYJOSQMAeMeKLuWkBhEBQUUEGtEW4LBHAejKM5jAu6JbANSowvNYRgCNcETRNJIEowY1PU9XB0HG70fU9U0zeNf2lk8cgGXuhrXaa5rQrds2ufY8OlojQOqSjH3o65ikHhNAEQzjcnQeGpYel6a6ZhkhQLuV57BETK4ZEkKTRAuC6wf6Um-aWaBFNTwRyHAsDlHMo3GWuAtC9xEswMLhCBjTrR-nJmP2GY7YK2YCuFH29NcCupOELdjCBhk2S5M5qlswGUkoYYigLRecgvQwjuSNtC5u9I31gNBBOlu2tsGPbd2O87YB9gTuuntmMAZhbcmFtYnh2A0LT+sAQYAEz2K2xmFq0AAs3qbGAWF9QgjEgBQZGrKQDTEGMeCrPEGBoGEECkNNIC56jBCFkQYSELIcCVxSjCtBUtCkIMCB+a2Y+FhIg89xNi+FyvrmJzYxiNGnGfZxvE3AEbjvVVwDR4PRF7SfDRtyBgLSsxYX30Met0OGYgz0L87NSfHwMPlpGJBk84nQYCRnJJaHh05fyHAGf0gYQyY2BqWC66dbpyCmsglBeN7RgnQWCbBH0hCHyetBYqvdYLHn-k9QsYAsAGAzHAEuZcZiV0RJlNAcAyw4VWMyLYqwACsIYQxzwgf3QeBBh6VxoAQI2n5vwEA8MSOeuYJ7lAIGZOMX05ELTLBAJRewBByEXgPPApDV5CHoYwixhMiFyWABhLCOECAADJXE317qWQs287CIDmJQWxq8Pg3D1l41yYwADC09jDpythzR6KDVI82koFPClFiLUVFuEj6FFCLUQXOtXWSS0YQORvYj6AA3MyaBGF4ErtAPA08ZR+QgUE2hZipEMBHn5EJtwbiGIgAIAguRyhz10EYkZYhTHL3Ee8K4oT2neKEL49p0F7GLyTrYUhmzVkrl1ijEAJgQAehIA0FA6BASEG8vUHoWVawhCwPWT0WIHhhEqggUgqwsD3MGOsCo0RViiGwGQSgQgiIeGqBoJcK4hAiBYFgMg7ExiZG+nFTKpBWmHiUexMAJAGAED6PgWppBCx3KgA8p5jlWxEyOeAIxAVtpDFIGAFAY4WUIHsEAA

Repro steps

I'm not sure if question or bug.

I upgraded to the latest version of eslint-plugin-react-hooks, enabled every compiler lint rule, and got 150+ errors in a reasonably sized codebase related to react-hooks/preserve-manual-memoization. The attached playground link comes from a smaller project with idiomatic React/Relay code where I saw similar issues.

I roughly understand that the compiler can do a little bit better than me in this example, but I still prefer writing useCallback/useMemo in case I need to disable the compiler. I prefer manual control over memoization, and deferring "the rest" to the compiler. I realize that's subjective, so this is more of a question of whether this rule will be on by default in the recommended config in eslint-plugin-react-hooks? If yes, will it be a warning or an error?

Depending on the answer, I would like to ask if it's possible to change the name, title and explanation of this lint rule to something more approachable. Right now it says:

react-hooks/preserve-manual-memoization

Compilation Skipped: Existing memoization could not be preserved
React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output.

The wording is imho quite confusing. The compiler is telling me I did something wrong, and is giving me no hints about what that might be. How about this:

react-hooks/unnecessary-manual-memoization

Compilation Skipped: Unnecessary manual memoization
React Compiler has skipped optimizing this component because the manual memoization is weaker than React Compiler's memoization. Remove the useMemo call and embed the result directly in your render function.

My final question is: if you can detect that React Compiler can do a better than me, couldn't you wrap my memoization with some compiler magic and get rid of this lint rule?

How often does this bug happen?

Every time

What version of React are you using?

19.2.0.

What version of React Compiler are you using?

I don't know, latest.

[josephsavona]

Thanks for posting. As background, see my answer at #34172 (comment) for why the compiler works as it does. In your example, the compiler doesn’t know the type of jobs and assumes it’s an arbitrary mutable value, such that the later jobs.map(…) could be mutating that value. In other words, it isn’t that the compiler can do “better” than the developer, it’s that the compiler isn’t sure if the manual memoization is safe or not.

There is also some discussion of this at #34289

As I mentioned in the latter - this is an area with difficult tradeoffs and no best answer. We are continuing to evaluate whether to change the compiler to treat existing manual memoization as an input to compilation. A downside is that it would then become a breaking change to remove manual memoization.

[josephsavona]

Hey @cpojer, as I noted above we've been exploring this tradeoff for some time. As of yesterday we're confident enough in the new mode to make it the default, which should address the concern here. More details at #34172 (comment).