Mofei Zhang (@zmofei) / X

Giriş yap Kaydol

Mofei Zhang

23 posts

Mofei Zhang

@zmofei

software engineer @ meta, compiling your @reactjs code so you can forget it

New York, NY

April 2011 tarihinde katıldı

Mofei Zhang
@zmofei
17 May 2024
@zmofei adlı kullanıcıya yanıt olarak
For anyone curious about live coding a very simple react compiler ("React Compiler Deep Dive"), check out the source + commits/steps here github.com/mofeiZ/bootleg… As @_gsathya explained, react's programming model is great for both devs and compilers
GitHub - mofeiZ/bootleg-react-compiler: Now that react compiler has been released, let's write an...
Kaynak: github.com
Mofei Zhang
@zmofei
17 May 2024
I had a blast at (my first) #reactconf and learned so much, it was awesome meeting everyone! (tbt to hanging out with @_gsathya before the conf started)
Mofei Zhang
@zmofei
15 May 2024
@brandontroberts adlı kullanıcıya yanıt olarak
just merged in github.com/facebook/react… 🎉 so excited!
Open-source React Compiler by josephsavona · Pull Request #29061 · react/react
Kaynak: github.com
Mofei Zhang
@zmofei
18 May 2024
@JSer_ZANP adlı kullanıcıya yanıt olarak
-memo added by the compiler may increase retained memory, but we try to only memoize values react would already be retaining through Component fiber internals, e.g jsx attributes. Added memo also decreases # of allocations per render, which is likely better for garbage collectors
Mofei Zhang
@zmofei
23 Nis 2024
@Ravicious ve @en_JS adlı kullanıcılara yanıt olarak
React compiler assumes that your code follows rules of react (e.g. pure functions, no writing to props, no dynamic hook calls). Strict mode + react lint rules helps you follow these rules and will help you debug + write better code. But strict mode is not strictly required
Mofei Zhang
@zmofei
16 May 2024
The core logic + program representation is entirely separate from babel. Eventually, we hope to have the compiler written in rust, then write small adapter pieces for babel/swc/esbuild. If you’re interested, please check out these docs!
react/compiler/docs/DESIGN_GOALS.md at main · react/react
Kaynak: github.com
Mofei Zhang
@zmofei
16 May 2024
Replying to @zmofei @bcheidemann and @poteto
- we’ve found that some dynamic / interactive pages need a few rendering passes before “visual completion”, which is a similar metric to LCP. This is where the initial load + nav wins came from — minimizing the cost of these rerenders
Mofei Zhang
@zmofei
16 May 2024
Replying to @zmofei @bcheidemann and @poteto
Internally, we’ve seen that we typically get faster initial load / nav wins from compiler optimized code: - we have a lot of non-product + react code we send to the client (e.g data libraries, design components), so regression in react codesize showed up less than we expected
Mofei Zhang
@zmofei
16 May 2024
@bcheidemann ve @poteto adlı kullanıcılara yanıt olarak
Thanks for engaging with us here. We don’t have an explicit go-ahead from legal yet, but I hope we can get permission to share more numbers. I totally understand being skeptical with regards to codesize though —
Mofei Zhang
@zmofei
18 May 2024
@JSer_ZANP adlı kullanıcıya yanıt olarak
3. We have some theories on this, but didn’t get to spend a lot of time digging: - the mentioned apps already have a sizable memory footprint, so a few new arrays won’t show much. it’s also worth noting that compiler output is much more efficientthan useMemo (no functions)
Mofei Zhang
@zmofei
14 May 2024
@jimmycallin ve @acdlite adlı kullanıcılara yanıt olarak
We’re currently not planning to support a small set of syntax (eg class components/this, side-effectful getters) as their dataflow + alias sets are intractable to compute. This will also apply to new language features. This hasn’t affected our use of the compiler internally tho
Mofei Zhang
@zmofei
17 May 2024
@JSer_ZANP adlı kullanıcıya yanıt olarak
2. So the metric we rely on internally is not first paint, but “visual completion” which measures how long it takes to load visible / viewport content. We did find that bundle size regressed slightly, but was overshadowed by how much time we were able to save on initial renders
Mofei Zhang
@zmofei
17 May 2024
@JSer_ZANP adlı kullanıcıya yanıt olarak
great questions, thanks for asking! 1. We measured between the interaction until the “last” react render. Optimized code caused fewer elements to re-render when a component high up in the tree invalidates. If you’re curious, we shared a flamegraph @ ReactAdvanced 2023
Mofei Zhang
@zmofei
17 May 2024
@captbaritone adlı kullanıcıya yanıt olarak
Just published! Check out github.com/mofeiZ/bootleg… 🎉
GitHub - mofeiZ/bootleg-react-compiler: Now that react compiler has been released, let's write an...
Kaynak: github.com