[$250] [HOLD for payment 2024-11-11] [HOLD for payment 2024-11-07] [DX] Fix hot-reloading for web (and potentially desktop)

[blazejkustra]

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

hmr-not-working.mov

After

hmr.mov

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021854176886348335774
• Upwork Job ID: 1854176886348335774
• Last Price Increase: 2024-11-06

Issue Owner

Current Issue Owner: @joekaufmanexpensify

[melvin-bot]

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]

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

[blazejkustra]

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]

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

[mountiny]

Thanks @blazejkustra !

[melvin-bot]

@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]

I'm writing an update Melvin...

[blazejkustra]

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.

1. 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)
2. App crashes when changing the order of components:

Screen.Recording.2024-10-02.at.19.44.43.mov

3. App crashes when making changes to memo/callback hooks:

Screen.Recording.2024-10-02.at.19.45.33.mov

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]

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.

[blazejkustra]

Update: React just released a beta version of react-compiler, you can read more here. I'm working on a PR that updates the usage and fixes hot realoading for mobile, here is a draft PR.

[piotrski]

@blazejkustra, this issue seems to be resolved with new react-compiler-runtime. I had a PR ready but decided to close it because I was waiting for a new version of React DevTools to be released. The old one was not showing Memo✨ badges when using new react-compiler-runtime. Additionally, I fixed the issue when Jest tests were run without react-compiler #51233.

[melvin-bot]

📣 @piotrski! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.55-10 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [NoQA] Use official react-compiler-runtime package + fix fast refresh not refreshing components on mobile #51183
• [No QA] Refactor Search component to use useMemo for data calculation #51480

If no regressions arise, payment will be issued on 2024-11-07. 🎊

For reference, here are some details about the assignees on this issue:

• @ntdiary requires payment through NewDot Manual Requests
• @blazejkustra does not require payment (Contractor)

[melvin-bot]

@ntdiary The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.56-9 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [No QA] Enable Fast Refresh for Web and Desktop Platforms #49181

If no regressions arise, payment will be issued on 2024-11-11. 🎊

For reference, here are some details about the assignees on this issue:

• @ntdiary requires payment through NewDot Manual Requests
• @blazejkustra does not require payment (Contractor)

[melvin-bot]

@ntdiary The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[ntdiary]

Note: I reviewed #51183 as C+, @allroundexperts reviewed PR #49181 as C+. 😄

[melvin-bot]

Triggered auto assignment to @joekaufmanexpensify (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]

$250 to @ntdiary and to @allroundexperts

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021854176886348335774

[melvin-bot]

Current assignees @ntdiary and @allroundexperts are eligible for the External assigner, not assigning anyone new.

[joekaufmanexpensify]

Payment summary:

• $250 to @ntdiary for C+ review of this PR via NewDot.
• $250 to @allroundexperts for C+ review of this PR via NewDot.

[joekaufmanexpensify]

Payment due tomorrow

[joekaufmanexpensify]

@ntdiary @allroundexperts closing this as it's all set. Please request payment above at your earliest convenience. TY!

[JmillsExpensify]

$250 approved for @ntdiary