[10.0.0-rc.0] Suspense's fallback not being unmounted when it should

Hey.

I found a pretty weird issue on Suspense’s fallback implementation of Preact X. Here’s a small codesandbox with the issue (please navigate using the links on the demo to see the issue ocurring).

It’s pretty simple, actually: Basically, when using a Component as a fallback, the content rendered by that Component isn’t unmounted after Switch rendered the new page of the router.

Now, curiously, the issue is basically resolved when I use the content rendered by the Component directly as the fallback, OR when I use () => <Loading /> with the fallback. I assume there’s some flag on the component object that is making Preact to ignore it instead of just unmounting it, but as I don’t know many of the Preact internals I’ll post this issue here and hope for a solution.

Hope this helps to discover the cause of the issue. And keep the great work! 👍

[fjorgemota]

Oh, okay, this makes sense.

Unfortunately, with that behavior the issue originally reported just…happens again. But okay, I’ll let the issue open anyway, and I’ll ignore the preact/debug issue for now.

Thanks for the reply anyway =)

[marvinhagemeister]

@fjorgemota preact/debug errors because () => <Loading /> is not a valid component instance. You’re passing the raw function instead.

// This is invalid
<div>{() => <Loading />}</div>

To pass Components around they need to be wrapped in h/createElement:

<div>{h(() => <Loading />)}</div>

// ... or via native jsx
const MyComponent = () => <Loading />;
<div><MyComponent /></div>