Reflex doesn't render properly when used in a <Suspense>

[lmossman]

Related issue: #27

I am running into a similar issue as the one linked above, in which the reflex container is rendering with the splitter completely to one side and unabled to be dragged, no content rendered in either pane, and with the styles of both the left and right panes being set to flex: 0 1 0%.

Here is a screenshot of this behavior:

I was able to narrow down the problem in my app to the fact that I am rendering the ReflexContainer inside of a <Suspense> component, and that Suspense is being triggered by a sibling component that makes a suspense query through react-query.

It seems that in this situation, the tries to render itself while actively being hidden by , which cases it to hit the Found ReflexContainer with width=0, this will cause invalid behavior... error, messing up its rendering.

@leefsmp I have put together a simple example of this behavior here: https://github.com/lmossman/reflex-example
To reproduce this behavior, simply clone that repo and run npm install && npm start, which will start a development server on localhost:3000 that demonstrates the above behavior.

Note that if you remove the <Suspense> and <QueryComponent> from the the App.jsx in that example, it properly renders the reflex container with a draggable splitter, which shows that the is what is causing this issue.

[lmossman]

It turns out, this issue seems to be caused by this bug in React <18 facebook/react#18141 (comment)

And upgrading my example repo to React 18 solves the issue. So for anyone else running into this, try upgrading to React 18 to solve it!

Another workaround is to not have a sibling component that causes the Suspense to fire, but instead wrap the ReflexContainer as a child of the suspending component

[leefsmp]

Thanks a lot for letting us know and for the proposed solutions 🙌🏻 !