floating-ui
floating-ui copied to clipboard
FloatingDelayGroup - This Suspense boundary received an update before it finished hydrating
After introducing the <FloatingDelayGroup/> component surrounding our page, we experience the "This Suspense boundary received an update before it finished hydrating" error on every page. This is caused by the immediate state update in the useModernLayoutEffect().
useModernLayoutEffect(() => {
if (state.currentId) {
if (initialCurrentIdRef.current === null) {
initialCurrentIdRef.current = state.currentId;
} else {
setState({isInstantPhase: true});
}
} else {
setState({isInstantPhase: false});
initialCurrentIdRef.current = null;
}
}, [state.currentId]);
Would it be an option to "debounce" the first state update, which is not really an update by checking if state.isInstantPhase = false and therefore not updating the state? I don't know the code really well, but this would not cause an instant state update after mounting and not trigger the error.
The code would look like this:
useModernLayoutEffect(() => {
if (state.currentId) {
if (initialCurrentIdRef.current === null) {
initialCurrentIdRef.current = state.currentId;
} else {
setState({isInstantPhase: true});
}
} else {
if(state.isInstantPhase !== false) {
setState({isInstantPhase: false});
}
initialCurrentIdRef.current = null;
}
}, [state.currentId]);
Thank you very much for your help :)