Skip to content

Defer hidden setState callbacks until component is visible#24872

Merged
acdlite merged 1 commit into
react:mainfrom
acdlite:defer-hidden-callbacks
Jul 8, 2022
Merged

Defer hidden setState callbacks until component is visible#24872
acdlite merged 1 commit into
react:mainfrom
acdlite:defer-hidden-callbacks

Conversation

@acdlite

@acdlite acdlite commented Jul 7, 2022

Copy link
Copy Markdown
Collaborator

A class component setState callback should not fire if a component is inside a hidden Offscreen tree. Instead, it should wait until the next time the component is made visible.

@acdlite
acdlite force-pushed the defer-hidden-callbacks branch from 88df1d0 to 8e1e48e Compare July 7, 2022 19:46
@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jul 7, 2022
@sizebot

sizebot commented Jul 7, 2022

Copy link
Copy Markdown

Comparing: c3b1857...f4357ec

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.26% 131.80 kB 132.14 kB +0.13% 42.41 kB 42.46 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.25% 137.07 kB 137.41 kB +0.23% 44.00 kB 44.10 kB
facebook-www/ReactDOM-prod.classic.js +0.43% 456.91 kB 458.86 kB +0.34% 83.17 kB 83.46 kB
facebook-www/ReactDOM-prod.modern.js +0.44% 442.15 kB 444.10 kB +0.34% 80.90 kB 81.18 kB
facebook-www/ReactDOMForked-prod.classic.js +0.40% 461.86 kB 463.70 kB +0.34% 83.86 kB 84.15 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
react-native/implementations/ReactNativeRenderer-profiling.js +0.51% 321.97 kB 323.60 kB +0.44% 57.56 kB 57.81 kB
react-native/implementations/ReactNativeRenderer-profiling.fb.js +0.48% 338.18 kB 339.79 kB +0.32% 60.30 kB 60.50 kB
facebook-www/ReactDOMTesting-prod.modern.js +0.46% 423.33 kB 425.28 kB +0.26% 79.41 kB 79.62 kB
facebook-www/ReactDOMTesting-prod.classic.js +0.44% 439.41 kB 441.36 kB +0.25% 81.88 kB 82.08 kB
facebook-www/ReactDOM-prod.modern.js +0.44% 442.15 kB 444.10 kB +0.34% 80.90 kB 81.18 kB
react-native/implementations/ReactNativeRenderer-prod.js +0.44% 302.85 kB 304.18 kB +0.28% 54.36 kB 54.52 kB
react-native/implementations/ReactNativeRenderer-prod.fb.js +0.43% 311.12 kB 312.45 kB +0.28% 55.99 kB 56.15 kB
facebook-www/ReactDOM-prod.classic.js +0.43% 456.91 kB 458.86 kB +0.34% 83.17 kB 83.46 kB
facebook-www/ReactART-prod.modern.js +0.42% 284.57 kB 285.76 kB +0.30% 50.36 kB 50.52 kB
facebook-www/ReactDOMForked-prod.modern.js +0.41% 447.10 kB 448.94 kB +0.35% 81.63 kB 81.92 kB
oss-stable-semver/react-art/cjs/react-art.production.min.js +0.41% 81.97 kB 82.31 kB +0.26% 25.60 kB 25.66 kB
oss-stable/react-art/cjs/react-art.production.min.js +0.41% 82.00 kB 82.34 kB +0.26% 25.60 kB 25.66 kB
facebook-www/ReactDOM-profiling.modern.js +0.41% 472.32 kB 474.24 kB +0.24% 85.44 kB 85.65 kB
facebook-www/ReactART-prod.classic.js +0.40% 295.41 kB 296.60 kB +0.28% 52.18 kB 52.33 kB
facebook-www/ReactDOMForked-prod.classic.js +0.40% 461.86 kB 463.70 kB +0.34% 83.86 kB 84.15 kB
facebook-www/ReactDOM-profiling.classic.js +0.39% 487.14 kB 489.07 kB +0.24% 87.83 kB 88.04 kB
oss-experimental/react-art/cjs/react-art.production.min.js +0.39% 86.77 kB 87.11 kB +0.29% 27.04 kB 27.12 kB
facebook-www/ReactDOMForked-profiling.modern.js +0.39% 477.54 kB 479.38 kB +0.26% 86.23 kB 86.45 kB
oss-stable-semver/react-test-renderer/cjs/react-test-renderer.production.min.js +0.38% 89.23 kB 89.57 kB +0.54% 27.66 kB 27.81 kB
oss-stable/react-test-renderer/cjs/react-test-renderer.production.min.js +0.38% 89.26 kB 89.59 kB +0.54% 27.66 kB 27.81 kB
react-native/implementations/ReactFabric-prod.js +0.37% 295.62 kB 296.73 kB +0.38% 53.29 kB 53.49 kB
facebook-www/ReactDOMForked-profiling.classic.js +0.37% 492.36 kB 494.21 kB +0.26% 88.55 kB 88.78 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.production.min.js +0.37% 93.00 kB 93.34 kB +0.23% 28.70 kB 28.77 kB
oss-stable/react-reconciler/cjs/react-reconciler.production.min.js +0.37% 93.02 kB 93.37 kB +0.23% 28.72 kB 28.79 kB
react-native/implementations/ReactFabric-prod.fb.js +0.36% 303.90 kB 305.01 kB +0.36% 54.92 kB 55.12 kB
oss-experimental/react-test-renderer/cjs/react-test-renderer.production.min.js +0.36% 93.69 kB 94.03 kB +0.49% 28.99 kB 29.13 kB
oss-stable-semver/react-test-renderer/umd/react-test-renderer.production.min.js +0.35% 89.52 kB 89.84 kB +0.24% 28.08 kB 28.15 kB
oss-stable/react-test-renderer/umd/react-test-renderer.production.min.js +0.35% 89.54 kB 89.86 kB +0.24% 28.08 kB 28.15 kB
oss-experimental/react-reconciler/cjs/react-reconciler.production.min.js +0.35% 97.87 kB 98.22 kB +0.38% 30.14 kB 30.25 kB
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-prod.js +0.35% 266.70 kB 267.62 kB +0.33% 48.34 kB 48.50 kB
oss-experimental/react-test-renderer/umd/react-test-renderer.production.min.js +0.34% 93.97 kB 94.29 kB +0.06% 29.39 kB 29.41 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.profiling.min.js +0.33% 101.82 kB 102.15 kB +0.12% 31.01 kB 31.05 kB
oss-stable/react-reconciler/cjs/react-reconciler.profiling.min.js +0.33% 101.84 kB 102.17 kB +0.12% 31.03 kB 31.07 kB
oss-experimental/react-reconciler/cjs/react-reconciler.profiling.min.js +0.32% 106.70 kB 107.04 kB +0.06% 32.43 kB 32.46 kB
react-native/implementations/ReactFabric-profiling.js +0.32% 314.82 kB 315.81 kB +0.30% 56.51 kB 56.68 kB
react-native/implementations/ReactFabric-profiling.fb.js +0.30% 331.02 kB 332.01 kB +0.32% 59.18 kB 59.37 kB
oss-stable-semver/react-art/umd/react-art.production.min.js +0.28% 117.87 kB 118.20 kB +0.08% 36.85 kB 36.88 kB
oss-stable/react-art/umd/react-art.production.min.js +0.28% 117.90 kB 118.22 kB +0.08% 36.85 kB 36.88 kB
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-profiling.js +0.27% 282.32 kB 283.09 kB +0.28% 50.65 kB 50.79 kB
oss-stable-semver/react-dom/umd/react-dom.production.min.js +0.27% 131.92 kB 132.27 kB +0.29% 43.06 kB 43.19 kB
oss-stable/react-dom/umd/react-dom.production.min.js +0.27% 131.94 kB 132.30 kB +0.30% 43.06 kB 43.19 kB
oss-stable-semver/react-test-renderer/cjs/react-test-renderer.development.js +0.27% 660.74 kB 662.50 kB +0.19% 144.63 kB 144.91 kB
oss-stable/react-test-renderer/cjs/react-test-renderer.development.js +0.27% 660.76 kB 662.52 kB +0.19% 144.66 kB 144.94 kB
oss-stable-semver/react-test-renderer/umd/react-test-renderer.development.js +0.27% 692.23 kB 694.07 kB +0.19% 146.17 kB 146.45 kB
oss-stable/react-test-renderer/umd/react-test-renderer.development.js +0.27% 692.26 kB 694.10 kB +0.19% 146.20 kB 146.48 kB
oss-experimental/react-art/umd/react-art.production.min.js +0.27% 122.62 kB 122.95 kB +0.08% 38.24 kB 38.27 kB
oss-experimental/react-test-renderer/cjs/react-test-renderer.development.js +0.26% 686.34 kB 688.10 kB +0.19% 149.84 kB 150.12 kB
oss-stable-semver/react-dom/cjs/react-dom.production.min.js +0.26% 131.78 kB 132.12 kB +0.13% 42.41 kB 42.46 kB
oss-stable/react-dom/cjs/react-dom.production.min.js +0.26% 131.80 kB 132.14 kB +0.13% 42.41 kB 42.46 kB
oss-stable-semver/react-art/cjs/react-art.development.js +0.26% 687.82 kB 689.58 kB +0.18% 149.43 kB 149.71 kB
oss-stable/react-art/cjs/react-art.development.js +0.26% 687.85 kB 689.61 kB +0.18% 149.46 kB 149.73 kB
oss-experimental/react-test-renderer/umd/react-test-renderer.development.js +0.26% 719.14 kB 720.98 kB +0.18% 151.45 kB 151.73 kB
oss-stable-semver/react-dom/umd/react-dom.profiling.min.js +0.25% 140.65 kB 141.00 kB +0.29% 45.37 kB 45.50 kB
oss-stable/react-dom/umd/react-dom.profiling.min.js +0.25% 140.68 kB 141.03 kB +0.29% 45.37 kB 45.50 kB
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-dev.js +0.25% 700.15 kB 701.88 kB +0.16% 151.36 kB 151.61 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.25% 137.07 kB 137.41 kB +0.23% 44.00 kB 44.10 kB
oss-experimental/react-art/cjs/react-art.development.js +0.25% 715.10 kB 716.86 kB +0.19% 155.14 kB 155.43 kB
oss-experimental/react-dom/umd/react-dom.production.min.js +0.25% 137.15 kB 137.48 kB +0.17% 44.62 kB 44.70 kB
oss-experimental/react-dom/umd/react-dom.profiling.min.js +0.24% 145.82 kB 146.17 kB +0.30% 46.90 kB 47.04 kB
facebook-www/ReactTestRenderer-dev.modern.js +0.24% 721.62 kB 723.35 kB +0.17% 155.32 kB 155.57 kB
facebook-www/ReactTestRenderer-dev.classic.js +0.24% 721.63 kB 723.35 kB +0.17% 155.32 kB 155.57 kB
oss-stable-semver/react-dom/cjs/react-dom.profiling.min.js +0.24% 141.21 kB 141.54 kB +0.29% 44.91 kB 45.04 kB
oss-stable/react-dom/cjs/react-dom.profiling.min.js +0.24% 141.23 kB 141.57 kB +0.29% 44.91 kB 45.04 kB
oss-experimental/react-dom/cjs/react-dom-unstable_testing.production.min.js +0.24% 142.35 kB 142.68 kB +0.22% 46.04 kB 46.14 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.development.js +0.23% 750.57 kB 752.33 kB +0.17% 160.45 kB 160.72 kB
oss-stable/react-reconciler/cjs/react-reconciler.development.js +0.23% 750.60 kB 752.36 kB +0.17% 160.48 kB 160.75 kB
oss-stable-semver/react-art/umd/react-art.development.js +0.23% 791.50 kB 793.34 kB +0.16% 167.60 kB 167.87 kB
oss-stable/react-art/umd/react-art.development.js +0.23% 791.52 kB 793.36 kB +0.16% 167.62 kB 167.89 kB
oss-experimental/react-dom/cjs/react-dom.profiling.min.js +0.23% 146.50 kB 146.83 kB +0.21% 46.49 kB 46.59 kB
oss-experimental/react-reconciler/cjs/react-reconciler.development.js +0.23% 778.13 kB 779.89 kB +0.17% 166.21 kB 166.48 kB
oss-experimental/react-art/umd/react-art.development.js +0.22% 820.12 kB 821.96 kB +0.16% 173.36 kB 173.63 kB
react-native/implementations/ReactFabric-dev.js +0.22% 780.99 kB 782.72 kB +0.15% 170.72 kB 170.98 kB
react-native/implementations/ReactNativeRenderer-dev.js +0.22% 790.58 kB 792.31 kB +0.15% 173.09 kB 173.35 kB
facebook-www/ReactART-dev.modern.js +0.22% 791.18 kB 792.91 kB +0.16% 168.89 kB 169.16 kB
facebook-www/ReactART-dev.classic.js +0.22% 801.41 kB 803.13 kB +0.16% 171.04 kB 171.30 kB
react-native/implementations/ReactFabric-dev.fb.js +0.21% 817.93 kB 819.66 kB +0.16% 177.30 kB 177.57 kB
react-native/implementations/ReactNativeRenderer-dev.fb.js +0.21% 827.50 kB 829.23 kB +0.15% 179.71 kB 179.99 kB

Generated by 🚫 dangerJS against f4357ec

A class component `setState` callback should not fire if a component is inside a
hidden Offscreen tree. Instead, it should wait until the next time the component
is made visible.
@acdlite
acdlite force-pushed the defer-hidden-callbacks branch from 8e1e48e to f4357ec Compare July 7, 2022 19:52
@acdlite
acdlite requested a review from rickhanlonii July 8, 2022 15:18

@rickhanlonii rickhanlonii left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM, just a question on naming.

Comment thread packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
@acdlite
acdlite merged commit 5e4e2da into react:main Jul 8, 2022
facebook-github-bot pushed a commit to react/react-native that referenced this pull request Sep 8, 2022
Summary:
This sync includes the following changes:
- **[4ea064e](react/react@4ea064eb0 )**: Don't fire passive effects during initial mount of a hidden Offscreen tree ([#24967](react/react#24967)) //<Andrew Clark>//
- **[2c7dea7](react/react@2c7dea736 )**: Implement Offscreen in Fizz ([#24988](react/react#24988)) //<Andrew Clark>//
- **[49f8254](react/react@49f8254d6 )**: Bug fix for <App /> vs. <Counter /> ([#24972](react/react#24972)) //<davidrenne>//
- **[6b28bc9](react/react@6b28bc9c5 )**: test: Throw custom error instead of relying on runtime error ([#24946](react/react#24946)) //<Sebastian Silbermann>//
- **[9bd0dd4](react/react@9bd0dd4c1 )**: test(react-debug-tools): Improve coverage of currentDispatcher.current setter ([#24945](react/react#24945)) //<Sebastian Silbermann>//
- **[59bc52a](react/react@59bc52a16 )**: Add 4.5.0 release to eslint rules CHANGELOG ([#24853](react/react#24853)) //<Sebastian Silbermann>//
- **[cfb6cfa](react/react@cfb6cfa25 )**: Reused components commit with timing as new ones //<Andrew Clark>//
- **[679eea3](react/react@679eea328 )**: Extract layout effects to separate functions //<Andrew Clark>//
- **[41287d4](react/react@41287d447 )**: Use recursion to traverse during "reappear layout" phase //<Andrew Clark>//
- **[697702b](react/react@697702bf3 )**: Use recursion to traverse during "disappear layout" phase //<Andrew Clark>//
- **[0220609](react/react@02206099a )**: Use recursion to traverse during passive unmount phase ([#24918](react/react#24918)) //<Andrew Clark>//
- **[f629495](react/react@f62949519 )**: [Transition Tracing] Rename transitionCallbacks to unstable_transitionCallbacks  ([#24920](react/react#24920)) //<Luna Ruan>//
- **[7a4336c](react/react@7a4336c40 )**: Use recursion to traverse during passive mount phase //<Andrew Clark>//
- **[bb1357b](react/react@bb1357b38 )**: Wrap try-catch directly around each user function //<Andrew Clark>//
- **[de3c069](react/react@de3c06984 )**: Move flag check into each switch case //<Andrew Clark>//
- **[f5916d1](react/react@f5916d15b )**: [Transition Tracing][Code Cleanup] Delete Marker Name Change Tests ([#24908](react/react#24908)) //<Luna Ruan>//
- **[fa20b31](react/react@fa20b319f )**: [Transition Tracing] Code Cleanup ([#24880](react/react#24880)) //<Luna Ruan>//
- **[5e8c196](react/react@5e8c1961c )**: [Transition Tracing] onMarkerProgress ([#24861](react/react#24861)) //<Luna Ruan>//
- **[b641d02](react/react@b641d0209 )**: Use recursion to traverse during layout phase //<Andrew Clark>//
- **[a1b1e39](react/react@a1b1e391e )**: Wrap try-catch directly around each user function //<Andrew Clark>//
- **[3df7e8f](react/react@3df7e8f5d )**: Move flag check into each switch case //<Andrew Clark>//
- **[b8c96b1](react/react@b8c96b136 )**: Move ref commit effects inside switch statement //<Andrew Clark>//
- **[e225fa4](react/react@e225fa43a )**: [Transition Tracing] Don't call transition callbacks if no transition name specified ([#24887](react/react#24887)) //<Luna Ruan>//
- **[dd2d652](react/react@dd2d65227 )**: [Transition Tracing] Tracing Marker Name Change in Update Warning ([#24873](react/react#24873)) //<Luna Ruan>//
- **[80208e7](react/react@80208e769 )**: [Transition Tracing] Add onTransitionProgress Callback ([#24833](react/react#24833)) //<Luna Ruan>//
- **[30eb267](react/react@30eb267ab )**: Land forked reconciler changes ([#24878](react/react#24878)) //<Andrew Clark>//
- **[5e4e2da](react/react@5e4e2dae0 )**: Defer setState callbacks until component is visible ([#24872](react/react#24872)) //<Andrew Clark>//
- **[8e35b50](react/react@8e35b5060 )**: [Transition Tracing] Refactor Code to Remove OffscreeInstance TODOs ([#24855](react/react#24855)) //<Luna Ruan>//
- **[deab126](react/react@deab1263a )**: [Transition Tracing] Change Transition Type Passed Pending Transitions ([#24856](react/react#24856)) //<Luna Ruan>//
- **[82e9e99](react/react@82e9e9909 )**: Suspending inside a hidden tree should not cause fallbacks to appear ([#24699](react/react#24699)) //<Andrew Clark>//

Changelog:
[General][Changed] - React Native sync for revisions c1f5884...4ea064e

jest_e2e[run_all_tests]

Reviewed By: philIip, NickGerleman

Differential Revision: D39305648

fbshipit-source-id: 627ead5035c77fbc902b306e17897e425ad7fb99
mrizwanashiq pushed a commit to mrizwanashiq/react that referenced this pull request Jun 25, 2026
A class component `setState` callback should not fire if a component is inside a
hidden Offscreen tree. Instead, it should wait until the next time the component
is made visible.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed React Core Team Opened by a member of the React Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants