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

Add Suspense Boundary Context (and unstable_avoidThisFallback) #15578

Merged
merged 4 commits into from
May 8, 2019

Conversation

sebmarkbage
Copy link
Collaborator

This adds a new context for Suspense boundaries. This will be used to implement longer suspense in cases it's undesirable to show a certain fallbacks state and SuspenseList.

The context is a bitmask split into two parts. A shallow part that only applies to the direct suspense boundaries below. A subtree part that applies to the entire subtree deeply. Currently there are only two flags but I expect we'll need more in the future. I already have a couple of ideas (like tagging dehydrated boundaries and optimizations for suspense list).

The interesting case that this PR models is the difference if suspense happens in a tree that is already showing its content on the screen or if the content of the current suspense boundary is invisible.

If the current suspense boundary is showing content, then switching to the fallback would hide that content. This is always undesirable. In a follow up, I will add an option to suspend the commit for longer in this case. This will kick in regardless if there is a unstable_avoidThisFallback boundary or not. Having one of these avoided boundaries is completely optional.

However, in the case where we cannot suspend the commit for longer (e.g. because there was no busy spinner or we're in a sync mode), the flag unstable_avoidThisFallback can be used as a back up boundary to avoid completely falling back to the outer most boundary. It's never a good idea to have one so I'm not sure we'll actually want to keep this API but this lets us play with it. I didn't bother adding too many tests for it.

During initial render (or if the tree was previously hidden) then a unstable_avoidThisFallback boundary behaves as if there was no boundary there at all. The outer one catches it.

@sebmarkbage sebmarkbage changed the title Add Suspense Boundary Context Add Suspense Boundary Context (and unstable_avoidThisFallback) May 7, 2019
@sizebot
Copy link

sizebot commented May 7, 2019

ReactDOM: size: 🔺+0.3%, gzip: 🔺+0.3%

Details of bundled changes.

Comparing: f9e60c8...b415837

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.development.js +0.5% +0.5% 821.91 KB 825.72 KB 187.55 KB 188.5 KB UMD_DEV
react-dom.production.min.js 🔺+0.3% 🔺+0.3% 103.7 KB 103.99 KB 33.7 KB 33.81 KB UMD_PROD
react-dom.profiling.min.js +0.3% +0.3% 106.86 KB 107.15 KB 34.69 KB 34.8 KB UMD_PROFILING
react-dom.development.js +0.5% +0.5% 816.32 KB 820.13 KB 185.99 KB 186.95 KB NODE_DEV
react-dom.production.min.js 🔺+0.3% 🔺+0.3% 103.7 KB 103.98 KB 33.15 KB 33.26 KB NODE_PROD
react-dom.profiling.min.js +0.3% +0.4% 107.03 KB 107.33 KB 33.99 KB 34.14 KB NODE_PROFILING
ReactDOM-dev.js +0.5% +0.5% 840.83 KB 844.85 KB 187.46 KB 188.48 KB FB_WWW_DEV
ReactDOM-prod.js 🔺+0.6% 🔺+0.5% 344.26 KB 346.23 KB 63.77 KB 64.09 KB FB_WWW_PROD
ReactDOM-profiling.js +0.5% +0.5% 349.76 KB 351.45 KB 64.79 KB 65.08 KB FB_WWW_PROFILING
react-dom-unstable-fire.development.js +0.5% +0.5% 822.23 KB 826.05 KB 187.69 KB 188.65 KB UMD_DEV
react-dom-unstable-fire.production.min.js 🔺+0.3% 🔺+0.3% 103.71 KB 104.01 KB 33.71 KB 33.82 KB UMD_PROD
react-dom-unstable-fire.profiling.min.js +0.3% +0.3% 106.87 KB 107.16 KB 34.7 KB 34.81 KB UMD_PROFILING
react-dom-unstable-fire.development.js +0.5% +0.5% 816.64 KB 820.45 KB 186.13 KB 187.09 KB NODE_DEV
react-dom-unstable-fire.production.min.js 🔺+0.3% 🔺+0.3% 103.71 KB 104 KB 33.15 KB 33.26 KB NODE_PROD
react-dom-unstable-fire.profiling.min.js +0.3% +0.4% 107.04 KB 107.34 KB 34 KB 34.15 KB NODE_PROFILING
ReactFire-dev.js +0.5% +0.5% 840.02 KB 844.04 KB 187.46 KB 188.47 KB FB_WWW_DEV
ReactFire-prod.js 🔺+0.6% 🔺+0.5% 332.25 KB 334.22 KB 61.37 KB 61.68 KB FB_WWW_PROD
ReactFire-profiling.js +0.5% +0.4% 337.72 KB 339.41 KB 62.36 KB 62.63 KB FB_WWW_PROFILING
react-dom-test-utils.development.js 0.0% 0.0% 54.23 KB 54.23 KB 14.98 KB 14.98 KB UMD_DEV
react-dom-test-utils.production.min.js 0.0% 🔺+0.1% 10.35 KB 10.35 KB 3.82 KB 3.82 KB NODE_PROD
react-dom-unstable-native-dependencies.development.js 0.0% 0.0% 60.76 KB 60.76 KB 15.84 KB 15.85 KB UMD_DEV
react-dom-unstable-native-dependencies.production.min.js 0.0% 🔺+0.1% 10.69 KB 10.69 KB 3.67 KB 3.67 KB UMD_PROD
react-dom-unstable-native-dependencies.development.js 0.0% 0.0% 60.43 KB 60.43 KB 15.72 KB 15.72 KB NODE_DEV
react-dom-unstable-native-dependencies.production.min.js 0.0% 🔺+0.1% 10.43 KB 10.43 KB 3.56 KB 3.57 KB NODE_PROD
react-dom-server.browser.development.js 0.0% 0.0% 136.73 KB 136.73 KB 35.99 KB 35.99 KB UMD_DEV
react-dom-server.browser.production.min.js 0.0% 0.0% 19.14 KB 19.14 KB 7.22 KB 7.22 KB UMD_PROD
react-dom-server.browser.production.min.js 0.0% 0.0% 19.07 KB 19.07 KB 7.21 KB 7.21 KB NODE_PROD
ReactDOMServer-dev.js 0.0% 0.0% 135.21 KB 135.21 KB 34.71 KB 34.71 KB FB_WWW_DEV
ReactDOMServer-prod.js 0.0% 0.0% 47.85 KB 47.85 KB 10.98 KB 10.98 KB FB_WWW_PROD
react-dom-server.node.production.min.js 0.0% 0.0% 19.93 KB 19.93 KB 7.51 KB 7.51 KB NODE_PROD
react-dom-unstable-fizz.browser.development.js 0.0% +0.2% 3.66 KB 3.66 KB 1.45 KB 1.46 KB UMD_DEV
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.4% 1.21 KB 1.21 KB 705 B 708 B UMD_PROD
react-dom-unstable-fizz.browser.development.js 0.0% +0.2% 3.49 KB 3.49 KB 1.41 KB 1.41 KB NODE_DEV
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.5% 1.05 KB 1.05 KB 636 B 639 B NODE_PROD
react-dom-unstable-fizz.node.development.js 0.0% +0.1% 3.74 KB 3.74 KB 1.43 KB 1.43 KB NODE_DEV
react-dom-unstable-fizz.node.production.min.js 0.0% 🔺+0.5% 1.1 KB 1.1 KB 666 B 669 B NODE_PROD

react-art

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-art.development.js +0.7% +0.8% 560.5 KB 564.3 KB 122.7 KB 123.66 KB UMD_DEV
react-art.production.min.js 🔺+0.3% 🔺+0.4% 95.51 KB 95.8 KB 29.3 KB 29.41 KB UMD_PROD
react-art.development.js +0.8% +0.9% 491.45 KB 495.26 KB 105.29 KB 106.24 KB NODE_DEV
react-art.production.min.js 🔺+0.5% 🔺+0.6% 60.49 KB 60.77 KB 18.63 KB 18.73 KB NODE_PROD
ReactART-dev.js +0.8% +1.0% 500.75 KB 504.77 KB 104.37 KB 105.38 KB FB_WWW_DEV
ReactART-prod.js 🔺+1.0% 🔺+0.9% 194.78 KB 196.74 KB 33.13 KB 33.43 KB FB_WWW_PROD

react-native-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactNativeRenderer-dev.js +0.6% +0.8% 632.82 KB 636.83 KB 134.61 KB 135.64 KB RN_FB_DEV
ReactNativeRenderer-prod.js 🔺+0.7% 🔺+0.7% 243.54 KB 245.19 KB 42.27 KB 42.55 KB RN_FB_PROD
ReactNativeRenderer-profiling.js +0.5% +0.6% 251.87 KB 253.14 KB 43.89 KB 44.17 KB RN_FB_PROFILING
ReactNativeRenderer-dev.js +0.6% +0.8% 632.73 KB 636.75 KB 134.57 KB 135.61 KB RN_OSS_DEV
ReactNativeRenderer-prod.js 🔺+0.7% 🔺+0.7% 243.56 KB 245.2 KB 42.27 KB 42.55 KB RN_OSS_PROD
ReactNativeRenderer-profiling.js +0.5% +0.6% 251.88 KB 253.16 KB 43.89 KB 44.17 KB RN_OSS_PROFILING
ReactFabric-dev.js +0.6% +0.8% 621.57 KB 625.59 KB 131.87 KB 132.88 KB RN_FB_DEV
ReactFabric-prod.js 🔺+0.7% 🔺+0.6% 236.71 KB 238.35 KB 40.96 KB 41.22 KB RN_FB_PROD
ReactFabric-profiling.js +0.5% +0.7% 245.03 KB 246.3 KB 42.63 KB 42.91 KB RN_FB_PROFILING
ReactFabric-dev.js +0.6% +0.8% 621.48 KB 625.49 KB 131.84 KB 132.85 KB RN_OSS_DEV
ReactFabric-prod.js 🔺+0.7% 🔺+0.6% 236.72 KB 238.36 KB 40.96 KB 41.22 KB RN_OSS_PROD
ReactFabric-profiling.js +0.5% +0.7% 245.04 KB 246.31 KB 42.63 KB 42.91 KB RN_OSS_PROFILING

react-test-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-test-renderer.development.js +0.8% +0.9% 504.96 KB 508.77 KB 108 KB 108.96 KB UMD_DEV
react-test-renderer.production.min.js 🔺+0.5% 🔺+0.5% 61.71 KB 61.99 KB 18.96 KB 19.05 KB UMD_PROD
react-test-renderer.development.js +0.8% +0.9% 500.5 KB 504.31 KB 106.9 KB 107.86 KB NODE_DEV
react-test-renderer.production.min.js 🔺+0.5% 🔺+0.5% 61.39 KB 61.68 KB 18.8 KB 18.9 KB NODE_PROD
ReactTestRenderer-dev.js +0.8% +1.0% 511.44 KB 515.46 KB 106.63 KB 107.64 KB FB_WWW_DEV
react-test-renderer-shallow.production.min.js 0.0% 0.0% 11.54 KB 11.54 KB 3.54 KB 3.54 KB UMD_PROD
react-test-renderer-shallow.development.js 0.0% 0.0% 35.72 KB 35.72 KB 9.29 KB 9.3 KB NODE_DEV
react-test-renderer-shallow.production.min.js 0.0% 🔺+0.1% 11.73 KB 11.73 KB 3.66 KB 3.66 KB NODE_PROD

react-reconciler

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-reconciler.development.js +0.8% +0.9% 488.98 KB 492.79 KB 103.72 KB 104.68 KB NODE_DEV
react-reconciler.production.min.js 🔺+0.5% 🔺+0.6% 61.42 KB 61.71 KB 18.37 KB 18.48 KB NODE_PROD
react-reconciler-persistent.development.js +0.8% +0.9% 486.88 KB 490.7 KB 102.85 KB 103.81 KB NODE_DEV
react-reconciler-persistent.production.min.js 🔺+0.5% 🔺+0.6% 61.44 KB 61.72 KB 18.38 KB 18.49 KB NODE_PROD
react-reconciler-reflection.development.js 0.0% 0.0% 18.79 KB 18.79 KB 5.92 KB 5.92 KB NODE_DEV
react-reconciler-reflection.production.min.js 0.0% 🔺+0.1% 2.43 KB 2.43 KB 1.09 KB 1.09 KB NODE_PROD

Generated by 🚫 dangerJS

// We can use this to determine if it is desirable to trigger a fallback at
// the parent. If not, then we might need to trigger undesirable boundaries
// and/or suspend the commit to avoid hiding the parent content.
export const InvisibleParentSuspenseContext: SubtreeSuspenseContext = 0b01;
Copy link
Collaborator

Choose a reason for hiding this comment

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

I find this name confusing but don't have a better suggestion

@sebmarkbage sebmarkbage merged commit c7398f3 into facebook:master May 8, 2019
@gaearon gaearon mentioned this pull request Mar 29, 2022
This was referenced May 19, 2024
This was referenced Nov 6, 2024
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.

4 participants