#Hydration issues when using props.children inside component

1 messages · Page 1 of 1 (latest)

keen dove
# 
 return (
    <Router
      root={(props) => (
        <MetaProvider>
          <QueryClientProvider client={queryClient}>
            <Title>Schizophrenia poll</Title>
            <ErrorBoundar>
              <Suspense>
                <NavBar />
                <TransitionSlideGlobal>{props.children}</TransitionSlideGlobal>
              </Suspense>
            </ErrorBoundary>
          </QueryClientProvider>
        </MetaProvider>
      )}>
      <FileRoutes />
    </Router>
  );

Code is that in app.tsx, problem is that I get hydration mismatch. <TransitionSlideGlobal> just uses solid-transition-group.


return (
    <>
      <Transition>
        {props.children}
      </Transition>
      <Transition
   
        <Show when={vis()}>
          <Footer />
        </Show>
      </Transition>
    </>
  );
muted echo
#

What's vis

keen dove
#

It's just a signal, used to get around transition limitations of just one jsx parent element

#

There is more code there but this is the minimal repro i cut down

#

I thought if props.children was without parent element it might explain why this doesn't work anymore in beta 2, but i dont know if children without parent element is even possible

muted echo
#

because if it is, we can blame this on the transition library

keen dove
#

How do i ensure it's consistent value?

The transition component from changes the vis() with its onExit props.

I will test futher if the vis is the culprit. But I think in cut down repro it wasn't changed at all

muted echo