S
SolidJS•2y ago
Delvis

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
lxsmnsyc•2y ago
What's vis
Delvis
DelvisOP•2y 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
lxsmnsyc•2y 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
Delvis
DelvisOP•2y 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
lxsmnsyc•2y ago
just the initial state
Delvis
DelvisOP•2y 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

Did you find this page helpful?