Try: React Compiler

[tyxla]

What?

This PR starts experimenting with the React Compiler.

This is simultaneous to the effort to adopt the React Compiler ESLint plugin in #61788.

Currently, this will trigger tons of errors, but having the PR here will help us with addressing them one by one.

Why?

Beta was just released 2 days ago, and adopting it earlier will help us prepare for React 19.

How?

We're using the babel-plugin-react-compiler plugin and the react-compiler-runtime to add React 18 support.

Testing Instructions

TBD - the sky falls right now, due to tons of violations.

Testing Instructions for Keyboard

Same

Screenshots or screencast

[tyxla]

Will be working on some fixes here, starting with:

• Footnotes: Remove extra callback when parsing content #66370
• Blocks: Try parse caching #66373

[swissspidy]

Re-sharing this here as I consider this a blocker from an i18n perspective:

I noticed that with React Compiler all translators comments are removed, which is not great, as WordPress translators rely on these comments for additional context. We must preserve them. I filed facebook/react#31364 for this.

We'll need to come up with an alternative in the meantime.

[tyxla]

Re-sharing this here as I consider this a blocker from an i18n perspective:

I noticed that with React Compiler all translators comments are removed, which is not great, as WordPress translators rely on these comments for additional context. We must preserve them. I filed facebook/react#31364 for this.

We'll need to come up with an alternative in the meantime.

Thanks for spotting this one @swissspidy, it's quite a major setback and blocker. We'll need to find a way around it, maybe through a config variable that allows skipping comments containing a particular string.

Still, blockers like that only highlight the fragility of how we've been indexing localized strings from compiled/built code. It will likely backfire in other instances in the future. That is a tricky issue to solve, though, especially with all the legacy accumulated over the years.

[Mamaduka]

I know we've got a couple of blockers, but it would be nice to get this PR to a point where all CI checks are green.

Looking forward to seeing performance stats and playing with editors.

[tyxla]

I know we've got a couple of blockers, but it would be nice to get this PR to a point where all CI checks are green.

Looking forward to seeing performance stats and playing with editors.

Likewise, after landing the ESLint plugin in #61788, this is the next step. I've been busy with other things, but hoping to restart working on this by the end of this week. Any contributions are welcome, of course!

[jsnajdr]

This directive disables memoization of the valueToHTMLString call in the RichText.Content component. The Content component is used in a renderToString call when serializing components to strings, and such components should never use hooks. Because renderToString has no dispatcher for hooks. But the compiler adds a useMemo.

[tyxla]

Nice find, and thanks for elaborating!

[jsnajdr]

This disables memoization of the conditional call in useSelect:

return staticSelectMode : _useStaticSelect() : _useMappingSelect();

The React Compiler things that the _use functions are regular function calls that it can memoize. But it can't, because that leads to the inner hook being called only sometimes. Breaking the rules of hooks in a breaking way.

[tyxla]

Makes sense to me! I think this is a good compromise to allow moving this work forward.