What can be expected regarding the upcoming React 19 Compiler

1

In several Blog Posts it was announced that React 19 will include it’s own optimizing compiler.
I was wondering how this will fit into the bigger picture in projects that use rescript and didn’t manage to find any existing discussions about this.
Are they mutually exclusive? Are they sequential?
If I adopt rescript for a react project - will I be able to benefit from React 19 once it comes out or will I be locked down to React 18 forever?

Thank’s a lot for clearing this up.

1 Like
2

The core of the compiler is almost completely decoupled from Babel, and the core compiler API is (roughly) old AST in, new AST out (while retaining source location data). Under the hood we use a custom code representation and transformation pipeline in order to do low-level semantic analysis. However, the primary public interface to the compiler will be via Babel and other build system plugins.

I wonder if that core is binary or JS. I mean, whatever is done via a Babel plugin can be redone as a PPX, but reusing the logic vendored by React team is likely much better.

1 Like
3

I would be very much interested as well to see what approach the Rescript dev team will take on React 19 new compiler.

4

I was curious to see how the latest version of Rescript works with the new React compiler, so I’ve managed to setup a minimal project with Next (raw js, typescript added some build complexities). So far it seems that compiled rescript components won’t be memo’d by the new compiler, unfortunately. I assume it happens due to them being compiled to jsx-runtime, which React can’t apply performance updates to. Maybe if we could preserve JSX output from Rescript it might’ve worked.

Here’s the link to the project: long-sandbox-link. Running steps:

  1. npm install --force because Rescript dependencies point to React 18.
  2. npx rescript build to generate .jsx component
  3. npm run dev to start the next project.
  4. if you are forking the sandbox - open the page in the new window, otherwise CodeSandbox won’t show new compiler messages. If you are running it locally - just open the project url.

Using react component tab in chrome you can see that all components except Rescript were successfully memo’d by the compiler.

Screenshot 2024-06-29 at 10.02.52
Screenshot 2024-06-29 at 10.02.52890×158 13.3 KB

5

This has nothing to do with JSX or plain function calls. It’s because ReScript 11 still compiles to var assignments. If you change the vars in the compiled output JSX file to let, it should work.

-  var match = React.useState(function () {
+  let match = React.useState(function () {
      return 0;
    });
-  var setState = match[1];
+  let setState = match[1];

image
image740×172 16.8 KB

ReScript 12 will compile to let: Back-end: emit `let` instead of `var`. by cristianoc · Pull Request #6102 · rescript-lang/rescript-compiler · GitHub

3 Likes
6

Maybe if we could preserve JSX output from Rescript it might’ve worked.

It may arrive on Rescript 12

7

Thank you for checking the code and correcting my misunderstanding :heart: Looking forward to Rescript 12 then!

2 Likes