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

Flush discrete passive effects before paint #21150

Merged
merged 1 commit into from
Mar 31, 2021

Conversation

acdlite
Copy link
Collaborator

@acdlite acdlite commented Mar 31, 2021

If a discrete render results in passive effects, we should flush them synchronously at the end of the current task so that the result is immediately observable. For example, if a passive effect adds an event listener, the listener will be added before the next input.

We don't need to do this for effects that don't have discrete/sync priority, because we assume they are not order-dependent and do not need to be observed by external systems.

For legacy mode, we will maintain the existing behavior, since it hasn't been reported as an issue, and we'd have to do additional work to distinguish "legacy default sync" from "discrete sync" to prevent all passive effects from being treated this way.

If a discrete render results in passive effects, we should flush them
synchronously at the end of the current task so that the result is
immediately observable. For example, if a passive effect adds an event
listener, the listener will be added before the next input.

We don't need to do this for effects that don't have discrete/sync
priority, because we assume they are not order-dependent and do not
need to be observed by external systems.

For legacy mode, we will maintain the existing behavior, since it hasn't
been reported as an issue, and we'd have to do additional work to
distinguish "legacy default sync" from "discrete sync" to prevent all
passive effects from being treated this way.
@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Mar 31, 2021
@sizebot
Copy link

sizebot commented Mar 31, 2021

Comparing: b48b38a...52a7680

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.02% 122.62 kB 122.65 kB +0.03% 39.34 kB 39.35 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.02% 129.19 kB 129.21 kB +0.03% 41.42 kB 41.43 kB
facebook-www/ReactDOM-prod.classic.js +0.02% 405.80 kB 405.89 kB +0.02% 75.37 kB 75.39 kB
facebook-www/ReactDOM-prod.modern.js +0.02% 394.06 kB 394.15 kB +0.02% 73.51 kB 73.53 kB
facebook-www/ReactDOMForked-prod.classic.js +0.02% 405.80 kB 405.89 kB +0.02% 75.37 kB 75.39 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 52a7680

@bvaughn
Copy link
Contributor

bvaughn commented Apr 3, 2021

FWIW, this change broke the settings modal dialog in DevTools. (Haven't dug into why yet, just found this commit by bisecting.)

@gaearon
Copy link
Collaborator

gaearon commented Apr 3, 2021

Probably similar to repro case in #20074 (comment) which this change made reproduce consistently.

@bvaughn
Copy link
Contributor

bvaughn commented Apr 3, 2021

Yeah, seems to be the same issue.

Looks like this click handler is firing and changing the context value to true:

const showFilterModal = useCallback(() => setIsModalShowing(true), [
setIsModalShowing,
]);

And then, as part of the same "click" event, this handler is now also being called and dismissing the modal:

export function useModalDismissSignal(
modalRef: {current: HTMLDivElement | null, ...},
dismissCallback: () => void,
dismissOnClickOutside?: boolean = true,
): void {
useEffect(() => {
if (modalRef.current === null) {
return () => {};
}
const handleDocumentKeyDown = ({key}: any) => {
if (key === 'Escape') {
dismissCallback();
}
};
const handleDocumentClick = (event: any) => {
// $FlowFixMe
if (
modalRef.current !== null &&
!modalRef.current.contains(event.target)
) {
event.stopPropagation();
event.preventDefault();
dismissCallback();
}
};
// It's important to listen to the ownerDocument to support the browser extension.
// Here we use portals to render individual tabs (e.g. Profiler),
// and the root document might belong to a different window.
const ownerDocument = modalRef.current.ownerDocument;
ownerDocument.addEventListener('keydown', handleDocumentKeyDown);
if (dismissOnClickOutside) {
ownerDocument.addEventListener('click', handleDocumentClick);
}
return () => {
ownerDocument.removeEventListener('keydown', handleDocumentKeyDown);
ownerDocument.removeEventListener('click', handleDocumentClick);
};
}, [modalRef, dismissCallback, dismissOnClickOutside]);
}

Obviously I can fix this on the DevTools side 😄

Fixed via #21173

acdlite added a commit to acdlite/react that referenced this pull request Apr 11, 2021
If a discrete render results in passive effects, we should flush them
synchronously at the end of the current task so that the result is
immediately observable. For example, if a passive effect adds an event
listener, the listener will be added before the next input.

We don't need to do this for effects that don't have discrete/sync
priority, because we assume they are not order-dependent and do not
need to be observed by external systems.

For legacy mode, we will maintain the existing behavior, since it hasn't
been reported as an issue, and we'd have to do additional work to
distinguish "legacy default sync" from "discrete sync" to prevent all
passive effects from being treated this way.
acdlite added a commit to acdlite/react that referenced this pull request Apr 13, 2021
If a discrete render results in passive effects, we should flush them
synchronously at the end of the current task so that the result is
immediately observable. For example, if a passive effect adds an event
listener, the listener will be added before the next input.

We don't need to do this for effects that don't have discrete/sync
priority, because we assume they are not order-dependent and do not
need to be observed by external systems.

For legacy mode, we will maintain the existing behavior, since it hasn't
been reported as an issue, and we'd have to do additional work to
distinguish "legacy default sync" from "discrete sync" to prevent all
passive effects from being treated this way.
acdlite added a commit to acdlite/react that referenced this pull request Apr 16, 2021
If a discrete render results in passive effects, we should flush them
synchronously at the end of the current task so that the result is
immediately observable. For example, if a passive effect adds an event
listener, the listener will be added before the next input.

We don't need to do this for effects that don't have discrete/sync
priority, because we assume they are not order-dependent and do not
need to be observed by external systems.

For legacy mode, we will maintain the existing behavior, since it hasn't
been reported as an issue, and we'd have to do additional work to
distinguish "legacy default sync" from "discrete sync" to prevent all
passive effects from being treated this way.
acdlite added a commit to acdlite/react that referenced this pull request Apr 16, 2021
If a discrete render results in passive effects, we should flush them
synchronously at the end of the current task so that the result is
immediately observable. For example, if a passive effect adds an event
listener, the listener will be added before the next input.

We don't need to do this for effects that don't have discrete/sync
priority, because we assume they are not order-dependent and do not
need to be observed by external systems.

For legacy mode, we will maintain the existing behavior, since it hasn't
been reported as an issue, and we'd have to do additional work to
distinguish "legacy default sync" from "discrete sync" to prevent all
passive effects from being treated this way.
acdlite added a commit to acdlite/react that referenced this pull request Apr 19, 2021
If a discrete render results in passive effects, we should flush them
synchronously at the end of the current task so that the result is
immediately observable. For example, if a passive effect adds an event
listener, the listener will be added before the next input.

We don't need to do this for effects that don't have discrete/sync
priority, because we assume they are not order-dependent and do not
need to be observed by external systems.

For legacy mode, we will maintain the existing behavior, since it hasn't
been reported as an issue, and we'd have to do additional work to
distinguish "legacy default sync" from "discrete sync" to prevent all
passive effects from being treated this way.
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Apr 20, 2021
Summary:
This sync includes the following changes:
- **[f7cdc8936](facebook/react@f7cdc8936 )**: Also turn off enableSyncDefaultUpdates in RN test renderer ([#21293](facebook/react#21293)) //<Ricky>//
- **[4c9eb2af1](facebook/react@4c9eb2af1 )**: Add dynamic flags to React Native ([#21291](facebook/react#21291)) //<Ricky>//
- **[9eddfbf5a](facebook/react@9eddfbf5a )**: [Fizz] Two More Fixes ([#21288](facebook/react#21288)) //<Sebastian Markbåge>//
- **[11b07597e](facebook/react@11b07597e )**: Fix classes ([#21283](facebook/react#21283)) //<Sebastian Markbåge>//
- **[96d00b9bb](facebook/react@96d00b9bb )**: [Fizz] Random Fixes ([#21277](facebook/react#21277)) //<Sebastian Markbåge>//
- **[81ef53953](facebook/react@81ef53953 )**: Always insert a dummy node with an ID into fallbacks ([#21272](facebook/react#21272)) //<Sebastian Markbåge>//
- **[a4a940d7a](facebook/react@a4a940d7a )**: [Fizz] Add unsupported Portal/Scope components ([#21261](facebook/react#21261)) //<Sebastian Markbåge>//
- **[f4d7a0f1e](facebook/react@f4d7a0f1e )**: Implement useOpaqueIdentifier ([#21260](facebook/react#21260)) //<Sebastian Markbåge>//
- **[dde875dfb](facebook/react@dde875dfb )**: [Fizz] Implement Hooks ([#21257](facebook/react#21257)) //<Sebastian Markbåge>//
- **[a597c2f5d](facebook/react@a597c2f5d )**: [Fizz] Fix reentrancy bug ([#21270](facebook/react#21270)) //<Sebastian Markbåge>//
- **[15e779d92](facebook/react@15e779d92 )**: Reconciler should inject its own version into DevTools hook ([#21268](facebook/react#21268)) //<Brian Vaughn>//
- **[4f76a28c9](facebook/react@4f76a28c9 )**: [Fizz] Implement New Context ([#21255](facebook/react#21255)) //<Sebastian Markbåge>//
- **[82ef450e0](facebook/react@82ef450e0 )**: remove obsolete SharedArrayBuffer ESLint config ([#21259](facebook/react#21259)) //<Henry Q. Dineen>//
- **[dbadfa2c3](facebook/react@dbadfa2c3 )**: [Fizz] Classes Follow Up ([#21253](facebook/react#21253)) //<Sebastian Markbåge>//
- **[686b635b7](facebook/react@686b635b7 )**: Prevent reading canonical property of null ([#21242](facebook/react#21242)) //<Joshua Gross>//
- **[bb88ce95a](facebook/react@bb88ce95a )**: Bugfix: Don't rely on `finishedLanes` for passive effects ([#21233](facebook/react#21233)) //<Andrew Clark>//
- **[343710c92](facebook/react@343710c92 )**: [Fizz] Fragments and Iterable support ([#21228](facebook/react#21228)) //<Sebastian Markbåge>//
- **[933880b45](facebook/react@933880b45 )**: Make time-slicing opt-in ([#21072](facebook/react#21072)) //<Ricky>//
- **[b0407b55f](facebook/react@b0407b55f )**: Support more empty types ([#21225](facebook/react#21225)) //<Sebastian Markbåge>//
- **[39713716a](facebook/react@39713716a )**: Merge isObject branches ([#21226](facebook/react#21226)) //<Sebastian Markbåge>//
- **[8a4a59c72](facebook/react@8a4a59c72 )**: Remove textarea special case from child fiber ([#21222](facebook/react#21222)) //<Sebastian Markbåge>//
- **[dc108b0f5](facebook/react@dc108b0f5 )**: Track which fibers scheduled the current render work ([#15658](facebook/react#15658)) //<Brian Vaughn>//
- **[6ea749170](facebook/react@6ea749170 )**: Fix typo in comment ([#21214](facebook/react#21214)) //<inokawa>//
- **[b38ac13f9](facebook/react@b38ac13f9 )**: DevTools: Add post-commit hook ([#21183](facebook/react#21183)) //<Brian Vaughn>//
- **[b943aeba8](facebook/react@b943aeba8 )**: Fix: Passive effect updates are never sync ([#21215](facebook/react#21215)) //<Andrew Clark>//
- **[d389c54d1](facebook/react@d389c54d1 )**: Offscreen: Use JS stack to track hidden/unhidden subtree state ([#21211](facebook/react#21211)) //<Brian Vaughn>//
- **[c486dc1a4](facebook/react@c486dc1a4 )**: Remove unnecessary processUpdateQueue ([#21199](facebook/react#21199)) //<Sebastian Markbåge>//
- **[cf45a623a](facebook/react@cf45a623a )**: [Fizz] Implement Classes ([#21200](facebook/react#21200)) //<Sebastian Markbåge>//
- **[75c616554](facebook/react@75c616554 )**: Include actual type of `Profiler#id` on type mismatch ([#20306](facebook/react#20306)) //<Sebastian Silbermann>//
- **[1214b302e](facebook/react@1214b302e )**: test: Fix "couldn't locate all inline snapshots" ([#21205](facebook/react#21205)) //<Sebastian Silbermann>//
- **[1a02d2792](facebook/react@1a02d2792 )**: style: delete unused isHost check ([#21203](facebook/react#21203)) //<wangao>//
- **[782f689ca](facebook/react@782f689ca )**: Don't double invoke getDerivedStateFromProps for module pattern ([#21193](facebook/react#21193)) //<Sebastian Markbåge>//
- **[e90c76a65](facebook/react@e90c76a65 )**: Revert "Offscreen: Use JS stack to track hidden/unhidden subtree state" ([#21194](facebook/react#21194)) //<Brian Vaughn>//
- **[1f8583de8](facebook/react@1f8583de8 )**: Offscreen: Use JS stack to track hidden/unhidden subtree state ([#21192](facebook/react#21192)) //<Brian Vaughn>//
- **[ad6e6ec7b](facebook/react@ad6e6ec7b )**: [Fizz] Prepare Recursive Loop for More Types ([#21186](facebook/react#21186)) //<Sebastian Markbåge>//
- **[172e89b4b](facebook/react@172e89b4b )**: Reland Remove redundant initial of isArray ([#21188](facebook/react#21188)) //<Sebastian Markbåge>//
- **[7c1ba2b57](facebook/react@7c1ba2b57 )**: Proposed new Suspense layout effect semantics ([#21079](facebook/react#21079)) //<Brian Vaughn>//
- **[316aa3686](facebook/react@316aa3686 )**: [Scheduler] Fix de-opt caused by out-of-bounds access ([#21147](facebook/react#21147)) //<Andrey Marchenko>//
- **[b4f119cdf](facebook/react@b4f119cdf )**: Revert "Remove redundant initial of isArray ([#21163](facebook/react#21163))" //<Sebastian Markbage>//
- **[c03197063](facebook/react@c03197063 )**: Revert "apply prettier ([#21165](facebook/react#21165))" //<Sebastian Markbage>//
- **[94fd1214d](facebook/react@94fd1214d )**: apply prettier ([#21165](facebook/react#21165)) //<Behnam Mohammadi>//
- **[b130a0f5c](facebook/react@b130a0f5c )**: Remove redundant initial of isArray ([#21163](facebook/react#21163)) //<Behnam Mohammadi>//
- **[2c9fef32d](facebook/react@2c9fef32d )**: Remove redundant initial of hasOwnProperty ([#21134](facebook/react#21134)) //<Behnam Mohammadi>//
- **[1cf9978d8](facebook/react@1cf9978d8 )**: Don't pass internals to callbacks ([#21161](facebook/react#21161)) //<Sebastian Markbåge>//
- **[b9e4c10e9](facebook/react@b9e4c10e9 )**: [Fizz] Implement all the DOM attributes and special cases ([#21153](facebook/react#21153)) //<Sebastian Markbåge>//
- **[f8ef4ff57](facebook/react@f8ef4ff57 )**: Flush discrete passive effects before paint ([#21150](facebook/react#21150)) //<Andrew Clark>//
- **[b48b38af6](facebook/react@b48b38af6 )**: Support nesting of startTransition and flushSync (alt) ([#21149](facebook/react#21149)) //<Sebastian Markbåge>//

Changelog:
[General][Changed] - React Native sync for revisions c9aab1c...f7cdc89

jest_e2e[run_all_tests]

Reviewed By: rickhanlonii

Differential Revision: D27740113

fbshipit-source-id: 6e27204d78e3e16ed205170006cb97c0d6bfa957
acdlite added a commit to acdlite/react that referenced this pull request Apr 23, 2021
This reverts commit 2e7acee.

If a discrete render results in passive effects, we should flush them
synchronously at the end of the current task so that the result is
immediately observable. For example, if a passive effect adds an event
listener, the listener will be added before the next input.

We don't need to do this for effects that don't have discrete/sync
priority, because we assume they are not order-dependent and do not
need to be observed by external systems.

For legacy mode, we will maintain the existing behavior, since it hasn't
been reported as an issue, and we'd have to do additional work to
distinguish "legacy default sync" from "discrete sync" to prevent all
passive effects from being treated this way.
acdlite added a commit to acdlite/react that referenced this pull request Apr 28, 2021
This reverts commit 2e7acee.

If a discrete render results in passive effects, we should flush them
synchronously at the end of the current task so that the result is
immediately observable. For example, if a passive effect adds an event
listener, the listener will be added before the next input.

We don't need to do this for effects that don't have discrete/sync
priority, because we assume they are not order-dependent and do not
need to be observed by external systems.

For legacy mode, we will maintain the existing behavior, since it hasn't
been reported as an issue, and we'd have to do additional work to
distinguish "legacy default sync" from "discrete sync" to prevent all
passive effects from being treated this way.
acdlite added a commit that referenced this pull request Apr 28, 2021
This reverts commit 2e7acee.

If a discrete render results in passive effects, we should flush them
synchronously at the end of the current task so that the result is
immediately observable. For example, if a passive effect adds an event
listener, the listener will be added before the next input.

We don't need to do this for effects that don't have discrete/sync
priority, because we assume they are not order-dependent and do not
need to be observed by external systems.

For legacy mode, we will maintain the existing behavior, since it hasn't
been reported as an issue, and we'd have to do additional work to
distinguish "legacy default sync" from "discrete sync" to prevent all
passive effects from being treated this way.
acdlite added a commit to acdlite/react that referenced this pull request May 3, 2021
acdlite added a commit to acdlite/react that referenced this pull request May 3, 2021
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request May 11, 2021
Summary:
This sync includes the following changes:
- **[b8fda6cab](facebook/react@b8fda6cab )**: [React Native] Set allowConcurrentByDefault = true ([#21491](facebook/react#21491)) //<Ricky>//
- **[1bb8987cc](facebook/react@1bb8987cc )**: Renamed function in error log issue #21446 ([#21449](facebook/react#21449)) //<faebzz>//
- **[bd070eb2c](facebook/react@bd070eb2c )**: Enable setJSResponder/setIsJSResponder for React Native Fabric ([#21439](facebook/react#21439)) //<Joshua Gross>//
- **[e9a4a44aa](facebook/react@e9a4a44aa )**: Add back root override for strict mode ([#21428](facebook/react#21428)) //<Ricky>//
- **[d1542de3a](facebook/react@d1542de3a )**: Unify React.memo and React.forwardRef display name logic ([#21392](facebook/react#21392)) //<Brian Vaughn>//
- **[9a130e1de](facebook/react@9a130e1de )**: StrictMode includes strict effects by default ([#21418](facebook/react#21418)) //<Brian Vaughn>//
- **[15fb8c304](facebook/react@15fb8c304 )**: createRoot API is no longer strict by default ([#21417](facebook/react#21417)) //<Brian Vaughn>//
- **[aea7c2aab](facebook/react@aea7c2aab )**: Re-land "Support nesting of startTransition and flushSync (alt) ([#21149](facebook/react#21149))" //<Andrew Clark>//
- **[bacc87068](facebook/react@bacc87068 )**: Re-land "Flush discrete passive effects before paint ([#21150](facebook/react#21150))" //<Andrew Clark>//
- **[098600c42](facebook/react@098600c42 )**: Re-land "Fix: flushSync changes priority inside effect ([#21122](facebook/react#21122))" //<Andrew Clark>//
- **[df420bc0a](facebook/react@df420bc0a )**: Re-land "Delete LanePriority type ([#21090](facebook/react#21090))" //<Andrew Clark>//
- **[ab5b37927](facebook/react@ab5b37927 )**: Re-land "Clean up host pointers in level 2 of clean-up flag ([#21112](facebook/react#21112))" //<Andrew Clark>//
- **[fd907c1f1](facebook/react@fd907c1f1 )**: Re-land "Use highest priority lane to detect interruptions ([#21088](facebook/react#21088))"" //<Andrew Clark>//
- **[269dd6ec5](facebook/react@269dd6ec5 )**: subtreeFlag warning: Fix legacy suspense false positive ([#21388](facebook/react#21388)) //<Andrew Clark>//
- **[9e9dac650](facebook/react@9e9dac650 )**: Add unstable_concurrentUpdatesByDefault ([#21227](facebook/react#21227)) //<Ricky>//
- **[86f3385d9](facebook/react@86f3385d9 )**: Revert "Use highest priority lane to detect interruptions ([#21088](facebook/react#21088))" //<Andrew Clark>//
- **[c6702656f](facebook/react@c6702656f )**: Revert "Clean up host pointers in level 2 of clean-up flag ([#21112](facebook/react#21112))" //<Andrew Clark>//
- **[1bd41c664](facebook/react@1bd41c664 )**: Revert "Delete LanePriority type ([#21090](facebook/react#21090))" //<Andrew Clark>//
- **[e7e0a90bd](facebook/react@e7e0a90bd )**: Revert "Fix: flushSync changes priority inside effect ([#21122](facebook/react#21122))" //<Andrew Clark>//
- **[7bac7607a](facebook/react@7bac7607a )**: Revert "Flush discrete passive effects before paint ([#21150](facebook/react#21150))" //<Andrew Clark>//
- **[207d4c3a5](facebook/react@207d4c3a5 )**: Revert "Support nesting of startTransition and flushSync (alt) ([#21149](facebook/react#21149))" //<Andrew Clark>//

Changelog:
[General][Changed] - React Native sync for revisions 2a7bb41...b8fda6c

jest_e2e[run_all_tests]

Reviewed By: yungsters

Differential Revision: D28351439

fbshipit-source-id: 29620f96c9fb9f02b0d856111d3882d3c69fd1c5
koto pushed a commit to koto/react that referenced this pull request Jun 15, 2021
If a discrete render results in passive effects, we should flush them
synchronously at the end of the current task so that the result is
immediately observable. For example, if a passive effect adds an event
listener, the listener will be added before the next input.

We don't need to do this for effects that don't have discrete/sync
priority, because we assume they are not order-dependent and do not
need to be observed by external systems.

For legacy mode, we will maintain the existing behavior, since it hasn't
been reported as an issue, and we'd have to do additional work to
distinguish "legacy default sync" from "discrete sync" to prevent all
passive effects from being treated this way.
koto pushed a commit to koto/react that referenced this pull request Jun 15, 2021
This reverts commit 2e7acee.

If a discrete render results in passive effects, we should flush them
synchronously at the end of the current task so that the result is
immediately observable. For example, if a passive effect adds an event
listener, the listener will be added before the next input.

We don't need to do this for effects that don't have discrete/sync
priority, because we assume they are not order-dependent and do not
need to be observed by external systems.

For legacy mode, we will maintain the existing behavior, since it hasn't
been reported as an issue, and we'd have to do additional work to
distinguish "legacy default sync" from "discrete sync" to prevent all
passive effects from being treated this way.
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.

6 participants