SolidJS•11mo ago

Hydration issues when using props.children inside component

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

 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>
    </>
  );

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

6 Replies

lxsmnsyc•11mo ago

What's vis

MassukkaOP•11mo ago

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

lxsmnsyc•11mo ago

yes but like is the value consistent between server and initial render on the client because if it is, we can blame this on the transition library

MassukkaOP•11mo ago

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

lxsmnsyc•11mo ago

just the initial state

MassukkaOP•11mo ago

I have narrowed it down. It only happens if I have both solid query and this <TransitionGlobal> enabled on route. They work individually but somehow they seem to interact with each other that causes hydration mismatch

Gaming

Programming

Hydration issues when using props.children inside component