Skip to content

chore(site): enable React's StrictMode #13399

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 3, 2024
Merged

chore(site): enable React's StrictMode #13399

merged 1 commit into from
Jun 3, 2024

Conversation

aslilac
Copy link
Member

@aslilac aslilac commented May 29, 2024

As we talked about last week: let's enable strict mode! might help us catch some bugs, shouldn't affect production users. :)

@Parkreiner
Copy link
Member

Parkreiner commented May 29, 2024

Gonna start looking at this when I get back tomorrow, but one thing I'm going to double-check is our state (limiting non-deterministic inputs so that renders stay pure) and effects (making sure everything has a cleanup function if it makes sense)

Copy link
Collaborator

@BrunoQuaresma BrunoQuaresma left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it is ok to merge since integration and e2e tests are passing 👍

@Parkreiner
Copy link
Member

Parkreiner commented May 30, 2024

Did a quick scan for our current useEffect calls, and a couple of concerns jumped out at me. To be clear, I don't know if these should block enabling StrictMode. These are bugs that our tests aren't catching, but the point of StrictMode is to highlight that these bugs exist. The issues still exist for the end user, whether we're using StrictMode or not

  • useProxyLatency
    • Doesn't clean up its PerformanceObserver
    • Didn't read through the whole file, but my understanding is that each time the effect re-fires, we'll get a new observer that will keep updating state that we don't care about anymore
  • MonacoEditor
    • Not sure if we want to cancel remeasuring the fonts when the theme changes
  • TemplateVersionEditorPage
    • The TAR reader has a race condition when the data changes
      • Initialize the file tree for data 1 and kick off an async process for reading it
      • Data changes and kicks off a new effect, and we now do the same thing for data 2
      • Data 2 finishes reading and updates state first because it's shorter
      • Data 1 then finishes and updates state as well, writing stale data
  • WorkspaceBuildProgress
    • Doesn't clear out a timeout

@BrunoQuaresma
Copy link
Collaborator

@Parkreiner how did you find those issues? I'm very interested if you have some methodology for that.

@Parkreiner
Copy link
Member

Parkreiner commented May 30, 2024

@Parkreiner how did you find those issues? I'm very interested if you have some methodology for that.

@BrunoQuaresma There's not really a methodology. All I did was do a search for the regex use(?:Layout)Effect\((to find invocations instead of just import statements) and eyeballed the logic really quick

@aslilac
Copy link
Member Author

aslilac commented May 31, 2024

@Parkreiner I created a new issue to track those issues. I'll look into them tomorrow, but it'll be as a separate PR.

@aslilac aslilac merged commit 79fd736 into main Jun 3, 2024
29 checks passed
@aslilac aslilac deleted the react-strict-mode branch June 3, 2024 16:03
@github-actions github-actions bot locked and limited conversation to collaborators Jun 3, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants