Open catamphetamine opened 1 year ago
Using Promise.resolve().then(popper.forceUpdate)
instead of popper.forceUpdate()
solves the issue as mentioned in salute-developers/plasma PR
So looks like the rationale for the suggested workaround is that react-popper
's forceUpdate()
function, calls flushSync()
inside. Therefore, it shouldn't be called in a callback right after the component has re-rendered because that results in a second render right after the first one, and React doesn't like that, presumably for performance reasons. Spacing out those two renders in time via Promise.resolve()
seems to fix the React warning.
I've tested the suggested Promise.resolve()
approach and it doesn't really work and the warning is still being shown. What worked though is setTimeout(forceUpdate, 0)
. Not forget that the timeout should be "cleared" on component unmount.
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: https://github.com/floating-ui/react-popper/blob/beac280d61082852c4efc302be902911ce2d424c/src/usePopper.js#L78The same issue was encountered in Mantine React component library. They've decided to migrate from
react-popper
to fix that in that issue.