Preview compile result in editor

[tocque]

Currently, the compilation of the React Compiler is completely a black box. Unless one views the compilation result, there is no way to know whether a certain piece of code is truly optimized. Is it possible to provide an editor plugin to mark in some form (such as Inlay Hints) how a certain piece of code will be optimized?

[orta]

This was noted as something they were exploring in the most recent blog post on the React Compiler hitting Beta

Throughout this process, we also plan to prototype an IDE extension for React. It is still very early in research, so we expect to be able to share more of our findings with you in a future React Labs blog post.

Which I would expect would do this, it'll be interesting to see where that goes

[poteto]

Yeah we're working on an IDE extension. In the meantime, you can use the React DevTools which will show you a ✨ badge next to React Compiler optimized components.

[guillaumebrunerie]

Yeah we're working on an IDE extension.

By "IDE", do you mean VSCode, or do you mean an extension that would work with several different IDEs, like a LSP server?

[poteto]

The latter (lsp) is what we're aiming for.

[blazejkustra]

While we are waiting for the official extension, would you consider sharing the source code for the VSCode extension that you showcased in this talk, @poteto? I'd love to have ✨ badge next to the compiled components 😅

[blazejkustra]

I've always wanted to create a VSCode extension, so I decided to give it a go 😅

Until the official IDE extension is out, you can check out this extension. It adds ✨ for optimized and 🚫 for non-optimized React components.

[colin969]

@blazejkustra Actual lifesaver.

I'm using it with an electron app, and since React Devtools hasn't really worked with it for years this is the only way I can get any feedback about what the compiler is doing at the moment.