Using custom renderer for standard components seems to break page events

[slahn]

When I supply a custom renderer for the Page component, the navigation between the forms in the demo breaks.

This also happens when you use the default rendering of the Page component, as long as it's wrapped in the CustomRenderer.

The same thing happens if I leave the Page component alone, but handle ServerLoad in the custom renderer.

When Page is rendered via a CustomRenderer, instead of directly by AnyComp, you need two clicks to navigate between the forms in the demo. The first click changes the displayed URL, but the fetch request is never sent. A second click sends the request, and swaps out the form.

You can reproduce this with npm-fastui-prebuilt and a small patch. If you would rather I make a branch that shows the error, I'm happy to do that as well.

diff --git a/src/npm-fastui-prebuilt/src/App.tsx b/src/npm-fastui-prebuilt/src/App.tsx
index c43cfdd..099d071 100644
--- a/src/npm-fastui-prebuilt/src/App.tsx
+++ b/src/npm-fastui-prebuilt/src/App.tsx
@@ -1,6 +1,7 @@
 import { CustomRender, FastUI, renderClassName } from 'fastui'
 import * as bootstrap from 'fastui-bootstrap'
 import { FC, ReactNode } from 'react'
+import { DivComp } from '../../npm-fastui/src/components'

 export default function App() {
   return (
@@ -38,6 +39,11 @@ const Transition: FC<{ children: ReactNode; transitioning: boolean }> = ({ child

 const customRender: CustomRender = (props) => {
   const { type } = props
+
+  if (type === 'Page') {
+    return () => <DivComp {...props} />
+  }
+
   if (type === 'Custom' && props.library === undefined && props.subType === 'cowsay') {
     console.assert(typeof props.data === 'string', 'cowsay data must be a string')
     const text = props.data as string

[slahn]

I think this happens because of a unnecessary remount of the custom rendered component, which breaks the nested ServerLoad component - maybe because the event listener is removed and re-added?

If I change CustomRender to return a ReactNode instead of a FC, everything works - I'm guessing React notices that the component tree doesn't change, then.

Let me know if you want a PR. This breaks the public API, though. Maybe there's a way to fix this while preserving the API.