floating-ui icon indicating copy to clipboard operation
floating-ui copied to clipboard

FloatingDelayGroup - This Suspense boundary received an update before it finished hydrating

Open devbrains-com opened this issue 1 year ago • 0 comments

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 :)

devbrains-com avatar May 16 '24 12:05 devbrains-com