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.

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

Fix suspense fallback throttling #24253

Merged
merged 4 commits into from Apr 12, 2022

Conversation

sunderls
Copy link
Contributor

@sunderls sunderls commented Apr 1, 2022

Summary

There seems to be a regression on suspense throttling.

in React 18-alpha version, Suspense fallbacks are throttled in committing codesandbox link
in React 18 release version, this is no longer working codesandbox link

Root cause

see the inline comments

How did you test this change?

before after
Apr-02-2022.00-24-42.mp4
Apr-02-2022.00-25-25.mp4

Test

Added one more test case in ReactSuspense-test.internal.js, to mimic the repro in above videos

on main branch it fails

Screenshot 2022-04-04 at 23 58 32

in this patch, it passes

Screenshot 2022-04-04 at 23 59 21

@sizebot
Copy link

sizebot commented Apr 1, 2022

Comparing: e0160d5...8bd48ca

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js +0.03% 131.28 kB 131.32 kB +0.04% 41.94 kB 41.96 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.03% 136.55 kB 136.58 kB +0.03% 43.53 kB 43.55 kB
facebook-www/ReactDOM-prod.classic.js +0.03% 435.21 kB 435.34 kB +0.02% 79.86 kB 79.87 kB
facebook-www/ReactDOM-prod.modern.js +0.03% 420.20 kB 420.34 kB +0.02% 77.49 kB 77.51 kB
facebook-www/ReactDOMForked-prod.classic.js +0.03% 435.21 kB 435.34 kB +0.02% 79.86 kB 79.87 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 8bd48ca

@sunderls sunderls force-pushed the fix-suspense-throttling branch 2 times, most recently from d45bb57 to 9805935 Compare April 1, 2022 23:57
@gaearon
Copy link
Collaborator

gaearon commented Apr 2, 2022

It would be nice to add some test that passes in this branch but fails on main.

@acdlite
Copy link
Collaborator

acdlite commented Apr 4, 2022

Nice fix! I can work on adding a test unless you beat me to it

@sunderls sunderls changed the title fix suspense throttling fix suspense fallback throttling Apr 4, 2022
@sunderls sunderls marked this pull request as ready for review April 4, 2022 23:24
@sunderls
Copy link
Contributor Author

sunderls commented Apr 4, 2022

@gaearon @acdlite I've added a test case which fails on main branch.
Hope you can take a look

@sunderls sunderls requested a review from gaearon April 9, 2022 12:31
@gaearon gaearon changed the title fix suspense fallback throttling Fix suspense fallback throttling Apr 11, 2022
Copy link
Collaborator

@gaearon gaearon left a comment

Choose a reason for hiding this comment

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

Looks good to me. Leaving for @acdlite to do a final review & merge

@gaearon
Copy link
Collaborator

gaearon commented Apr 11, 2022

@sunderls Thank you so much for finding this and sending a fix! Really nice work.

@acdlite
Copy link
Collaborator

acdlite commented Apr 12, 2022

Very impressive PR! Thanks for the fix!

@acdlite acdlite merged commit 4fc394b into facebook:main Apr 12, 2022
@sunderls sunderls deleted the fix-suspense-throttling branch April 12, 2022 18:06
rickhanlonii pushed a commit that referenced this pull request Apr 13, 2022
* fix suspense throttling

* fix lint

* Tweak tests + another test

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
rickhanlonii pushed a commit that referenced this pull request Apr 14, 2022
* fix suspense throttling

* fix lint

* Tweak tests + another test

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
zhengjitf pushed a commit to zhengjitf/react that referenced this pull request Apr 15, 2022
* fix suspense throttling

* fix lint

* Tweak tests + another test

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
rickhanlonii pushed a commit that referenced this pull request Apr 19, 2022
* fix suspense throttling

* fix lint

* Tweak tests + another test

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Apr 26, 2022
Summary:
This sync includes the following changes:
- **[bd4784c8f](facebook/react@bd4784c8f )**: Revert #24236 (Don't recreate the same fallback on the client if hydrating suspends) ([#24434](facebook/react#24434)) //<dan>//
- **[6d3b6d0f4](facebook/react@6d3b6d0f4 )**: forwardRef et al shouldn't affect if props reused ([#24421](facebook/react#24421)) //<Andrew Clark>//
- **[bd0813766](facebook/react@bd0813766 )**: Fix: useDeferredValue should reuse previous value ([#24413](facebook/react#24413)) //<Andrew Clark>//
- **[9ae80d6a2](facebook/react@9ae80d6a2 )**: Suppress hydration warnings when a preceding sibling suspends ([#24404](facebook/react#24404)) //<Josh Story>//
- **[0dc4e6663](facebook/react@0dc4e6663 )**: Land enableClientRenderFallbackOnHydrationMismatch ([#24410](facebook/react#24410)) //<Andrew Clark>//
- **[354772952](facebook/react@354772952 )**: Land enableSelectiveHydration flag ([#24406](facebook/react#24406)) //<Andrew Clark>//
- **[392808a1f](facebook/react@392808a1f )**: Land enableClientRenderFallbackOnTextMismatch flag ([#24405](facebook/react#24405)) //<Andrew Clark>//
- **[1e748b452](facebook/react@1e748b452 )**: Land enableLazyElements flag ([#24407](facebook/react#24407)) //<Andrew Clark>//
- **[4175f0593](facebook/react@4175f0593 )**: Temporarily feature flag numeric fallback for symbols ([#24401](facebook/react#24401)) //<Ricky>//
- **[a6d53f346](facebook/react@a6d53f346 )**: Revert "Clean up Selective Hydration / Event Replay flag ([#24156](facebook/react#24156))" ([#24402](facebook/react#24402)) //<Ricky>//
- **[ab9cdd34f](facebook/react@ab9cdd34f )**: Bugfix: In legacy mode, call suspended tree's unmount effects when it is deleted ([#24400](facebook/react#24400)) //<Andrew Clark>//
- **[168da8d55](facebook/react@168da8d55 )**: Fix typo that happened during rebasing //<Andrew Clark>//
- **[8bc527a4c](facebook/react@8bc527a4c )**: Bugfix: Fix race condition between interleaved and non-interleaved updates ([#24353](facebook/react#24353)) //<Andrew Clark>//
- **[f7cf077cc](facebook/react@f7cf077cc )**: [Transition Tracing] Add Offscreen Queue ([#24341](facebook/react#24341)) //<Luna Ruan>//
- **[4fc394bbe](facebook/react@4fc394bbe )**: Fix suspense fallback throttling ([#24253](facebook/react#24253)) //<sunderls>//
- **[80170a068](facebook/react@80170a068 )**: Match bundle.name and match upper case entry points ([#24346](facebook/react#24346)) //<Sebastian Markbåge>//
- **[fea6f8da6](facebook/react@fea6f8da6 )**: [Transition Tracing] Add transition to OffscreenState and pendingSuspenseBoundaries to RootState ([#24340](facebook/react#24340)) //<Luna Ruan>//
- **[8e2f9b086](facebook/react@8e2f9b086 )**: move passive flag ([#24339](facebook/react#24339)) //<Luna Ruan>//
- **[55a21ef7e](facebook/react@55a21ef7e )**: fix pushTransition for transition tracing ([#24338](facebook/react#24338)) //<Luna Ruan>//
- **[069d23bb7](facebook/react@069d23bb7 )**:  [eslint-plugin-exhaustive-deps] Fix exhaustive deps check for unstable vars ([#24343](facebook/react#24343)) //<Afzal Sayed>//
- **[4997515b9](facebook/react@4997515b9 )**: Point useSubscription to useSyncExternalStore shim ([#24289](facebook/react#24289)) //<dan>//
- **[01e2bff1d](facebook/react@01e2bff1d )**: Remove unnecessary check ([#24332](facebook/react#24332)) //<zhoulixiang>//
- **[d9a0f9e20](facebook/react@d9a0f9e20 )**: Delete create-subscription folder ([#24288](facebook/react#24288)) //<dan>//
- **[f993ffc51](facebook/react@f993ffc51 )**: Fix infinite update loop that happens when an unmemoized value is passed to useDeferredValue ([#24247](facebook/react#24247)) //<Andrew Clark>//
- **[fa5800226](facebook/react@fa5800226 )**: [Fizz] Pipeable Stream Perf ([#24291](facebook/react#24291)) //<Josh Story>//
- **[0568c0f8c](facebook/react@0568c0f8c )**: Replace zero with NoLanes for consistency in FiberLane ([#24327](facebook/react#24327)) //<Leo>//
- **[e0160d50c](facebook/react@e0160d50c )**: add transition tracing transitions stack ([#24321](facebook/react#24321)) //<Luna Ruan>//
- **[b0f13e5d3](facebook/react@b0f13e5d3 )**: add pendingPassiveTransitions ([#24320](facebook/react#24320)) //<Luna Ruan>//

Changelog:
[General][Changed] - React Native sync for revisions 60e63b9...bd4784c

jest_e2e[run_all_tests]

Reviewed By: kacieb

Differential Revision: D35899012

fbshipit-source-id: 86a885e336fca9f0efa80cd2b8ca040f2cb53853
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants