[DX] Fix hot-reloading for web (and potentially desktop)

blazejkustra commented 3 weeks ago

Problem

Currently, hot-reloading for web isn't functioning, causing prolonged waiting periods for developers during modifications. This wastes so much time during development.

Solution

I investigated the problem and found several issues with our current setup, here is a PR with the PoC

The key improvement is the ✨ state preservation ✨, since developers won't lose their current components state with each hot-reload.

Also I'm going to reach out to react-compiler team as I experience a crash when compiler is turned on and I try to refresh a component:

Before

https://github.com/user-attachments/assets/4fe94640-b4d3-476b-a423-9820c797b91c

After

https://github.com/user-attachments/assets/0333404a-2a50-4573-9cd3-ba09381fc178

Issue Owner

Current Issue Owner: @blazejkustra

melvin-bot[bot] commented 3 weeks ago

Triggered auto assignment to @anmurali (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

mountiny commented 3 weeks ago

No need for bug zero person here, we are going to work with the react-compiler team to hopefully fix this soon

blazejkustra commented 2 weeks ago

FYI, I'm still waiting to be added to React working group 😢 Either way I'm working on a different issue currently so I'll get back to this later in the week.

blazejkustra commented 1 week ago

Update: @mountiny I'm in! ⚛️ I'll create a post in the react-compiler group tomorrow

mountiny commented 1 week ago

Thanks @blazejkustra !

melvin-bot[bot] commented 1 week ago

@mountiny @blazejkustra this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

blazejkustra commented 1 week ago

I'm writing an update Melvin...

blazejkustra commented 1 week ago

Hey, wanted to give an update earlier but onboarding refactor was pulling me back 😅

For the past two days, I have been investigating the issue more closely and found a couple of bugs that arise from using react-compiler with React 18.

No updates in UI after making changes in the code, I have to reload the page each time or force the component to re-render to see the changes (same for native platforms)
App crashes when changing the order of components:

https://github.com/user-attachments/assets/bf2f8fe6-b7b8-479b-923c-54eb0dedcf7c

App crashes when making changes to memo/callback hooks:

https://github.com/user-attachments/assets/c7d67000-7a0d-4f38-b5b0-1f2b48af7d8c

At this point I was ready to create a thread on React Compiler WG, I even prepared a minimal reproduction repo here. But, then I decided I'll check one last thing, which was updating to React 19. As it turns out fast refresh works flawlessly on v19, no crashes, no invisible changes, nothing... I had to dig deeper, checked webpack HMR updates in Network tab, differences between React 18 vs 19, upgraded react-compiler babel plugin to newest versions but nothing really helped.

If anyone is interested, linking branches to test both React 18 and 19.

I'll continue researching tomorrow, but I think our best bet is to wait for react-compiler-runtime package to be released – it will be likely an improved version of our polyfill.

blazejkustra commented 1 week ago

Update:

I created a discussion here, sharing our experience
- The problem is that Fast Refresh works well on React 19, so I'm guessing they won't waste time fixing it for older versions
Meta is planning to release a package that will replace our polyfill, asked a follow up question here, because maybe it's worth to wait for it.

FYI I'm OOO Octorber 4-20, so I'll come back to this issue once I'm back.

Expensify / App