-
-
Notifications
You must be signed in to change notification settings - Fork 227
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
Warning: flushSync was called from inside a lifecycle method. #458
Comments
Using |
So looks like the rationale for the suggested workaround is that |
I've tested the suggested const { styles, attributes, forceUpdate } = usePopper(...)
const updateTooltipPositionTimer = useRef()
// Update tooltip position.
if (updateTooltipPositionTimer.current) {
clearTimeout(updateTooltipPositionTimer.current)
updateTooltipPositionTimer.current = undefined
}
updateTooltipPositionTimer.current = setTimeout(() => {
updateTooltipPositionTimer.current = undefined
forceUpdate()
}, 0)
...
useEffect(() => {
return () => {
if (updateTooltipPositionTimer.current) {
clearTimeout(updateTooltipPositionTimer.current)
updateTooltipPositionTimer.current = undefined
}
}
}, []) |
I get the following warning in the console:
The warning seems to originate from this
flushSync()
call:react-popper/src/usePopper.js
Line 78 in beac280
The same issue was encountered in Mantine React component library. They've decided to migrate from
react-popper
to fix that in that issue.The text was updated successfully, but these errors were encountered: