react-18 VS prepack

If you aren't sure why state tearing was a hot topic a few years ago, when React's concurrent mode was first discussed, this github discussion should help: https://github.com/reactwg/react-18/discussions/69.

Tanner Linsley had a great post on twitter that suggested that concurrent rendering was fundamentally at odds with fine-grained reactivity, so to better understand what he was talking about I decided to write this demo.

Image Source: https://github.com/reactwg/react-18/discussions/37

But it does since React 18.

See this post for more details and an example of an actual memory leak.

From the React WG:

The React working group is officially advising against using runtime CSS-in-JS.

Hello HN,

I'm considering the development of a new programming language, drawing inspiration from Rust's strengths, with a focus on compiling to JavaScript. Here what I'm considering are some key features:

Strict Type System

Algebraic Data Types

*Unsafe Mode for JS/TS Interaction*: Facilitate direct interaction with existing JavaScript and TypeScript code.

No Null Usage: Option/Result patterns to avoid null.

Trait Implementation

Backend Development Priority: Initially targeting server-side applications.

Efficient Compiler Design: Including features like dead-code elimination and partial evaluation, similar to the approach of Prepack[0] (by Facebook).

I believe this approach could bring significant benefits, especially with recent advancements like Uint8Array and worker threads.

Would this be of interest to the community? Looking forward to your insights and discussion.

[0] https://github.com/facebookarchive/prepack

You can still do optimisations based purely on Javascript semantics. This is similar to the first example you give with dead function elimination, and many minifiers do some amount of this already, but you can take it to some extremes. One example of this is the (no longer maintained) Prepack project from Facebook. The core idea is to evaluate as much Javascript as possible at compile time, with the expectation that the result will probably be smaller (albeit less human readable) than the initial code.

It's no longer maintained, but I think prepack is roughly what you're looking for.

i've had code where it intentionally relied on the wrong behavior (missing hook dependencies) and when I fixed it it caused an unintentional bug (hook fired too often or sometimes infinite rerendering). Yes it is more of a bug in the code rather than React hooks issue but it is also really hard to fix/rewrite. while i'd love to jump on the hype train projects like https://github.com/facebookarchive/prepack and how concurrent mode is still experimental after five+ years doesn't give me a lot of confidence.

Some real examples in JavaScript can be seen on Prepack[2]. Consequently it is natural to wonder whether we can AOT compile components of client side frameworks, to achieve a reduction in the final bundle size, but also to increase application execution speed.

Less or more it’s likely to happen, and could have been expected 2-3 years ago.

Especially with https://github.com/facebook/prepack. They want to eventually ship pre-compiled components rather than React.createElement() to end user

https://github.com/facebook/react/issues/7324

I also think this is why facebook had been investing in `prepack` - https://github.com/facebook/prepack