Hydration error when using <Show> in SolidStart

I am new to SolidStart, I see this talked about in several places but I fail to understand how any of the mentioned solutions applies to my case.

I am trying to conditionally render something using

<Show>

<Show>

export function Footer() {
  const user = createAsync(() => getUserQuery({}));

  return (
    <footer>
      <Show when={user()}>
        <p>
          Logged in as: <strong>{user()?.name}</strong>
        </p>
      </Show>
    </footer>
  );
}

export function Footer() {
  const user = createAsync(() => getUserQuery({}));

  return (
    <footer>
      <Show when={user()}>
        <p>
          Logged in as: <strong>{user()?.name}</strong>
        </p>
      </Show>
    </footer>
  );
}

This results in a hydration error. I am fairly sure that I understand why I'm getting the error, but what pattern should I use to conditionally render an element like this?

SolidJS•14mo ago•

11 replies

Eddie

Hydration error when using <Show> in SolidStart

<Show>

<Show>

export function Footer() {
  const user = createAsync(() => getUserQuery({}));

  return (
    <footer>
      <Show when={user()}>
        <p>
          Logged in as: <strong>{user()?.name}</strong>
        </p>
      </Show>
    </footer>
  );
}

export function Footer() {
  const user = createAsync(() => getUserQuery({}));

  return (
    <footer>
      <Show when={user()}>
        <p>
          Logged in as: <strong>{user()?.name}</strong>
        </p>
      </Show>
    </footer>
  );
}

This results in a hydration error. I am fairly sure that I understand why I'm getting the error, but what pattern should I use to conditionally render an element like this?

Hydration error when using <Show> in SolidStart

Similar Threads

Hydration error when using <Show> in SolidStart

Similar Threads

Similar Threads

Similar Threads