Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Use flushSync to avoid render lag (fixes MBS-12424) #2559

Merged
merged 1 commit into from Jun 2, 2022
Merged

Use flushSync to avoid render lag (fixes MBS-12424) #2559

merged 1 commit into from Jun 2, 2022

Commits on Jun 2, 2022

  1. Use flushSync to avoid render lag (fixes MBS-12424) 

    React v18 uses a new method of rendering that can be interrupted and
doesn't block the page from performing other work. This can make updates
appear laggy where we're trying to render many successive roots -- there
is a noticeable delay between rendering each root where React yields its
time. (In the case of MBS-12424, each "root" would be a track artist
credit container.) This isn't really a problem with React, but a side
effect of how we're gluing it into non-React code. Normally we wouldn't
have so many roots.

In order to make our haphazard way of rendering things into non-React
pages appear more snappy, I'm wrapping all calls to `render` and
`hydrateRoot` with `flushSync`, which causes all pending updates to the
DOM to occur immediately. This keeps that behavior in line with how
React v17 worked.

Wrapping `hydrateRoot` in particular may affect the timing of when user
scripts are allowed to interact with the page and avoid hydration
errors.
    @mwiencek
    mwiencek committed Jun 2, 2022
    Configuration menu
    Copy the full SHA
    db4ad19 View commit details
    Browse the repository at this point in the history