Skip to content

[Bug?]: createSelector doesn't work with hydration#2114

Description

@odama626

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 馃槸

createSelector does not work as expected when using SSR with hydration

Expected behavior 馃

createSelector should work the same whether it is being hydrated or not

Steps to reproduce 馃暪

Steps:

  1. pnpm create solid@latest createSelectorBug
  2. cd createSelectorBug && pnpm i && pnpm dev
  3. open app
  4. Paste this into index route
import { Title } from "@solidjs/meta";
import Counter from "~/components/Counter";
import { useSearchParams } from "@solidjs/router";
import { createSelector, createEffect } from "solid-js";

export default function Home() {
  const [searchParams, setSearchParams] = useSearchParams();
  const isVisible = createSelector(() => searchParams.dialog);
  const isVisibleFn = (x: string) => searchParams.dialog === x;

  createEffect(() => {
    console.log({ isVisibleSelector: isVisible("test") });
  });

  createEffect(() => {
    console.log({ isVisibleFunction: isVisibleFn("test") });
  });
  return (
    <main>
      <Title>Hello World</Title>
      <h1>Hello world!</h1>
      <Counter />
      <p>
        <Show when={isVisible("test")}>
          <div>Test is visible with createSelector</div>
        </Show>
        <Show when={isVisibleFn("test")}>
          <div>Test is visible with function</div>
        </Show>
        <button
          onClick={() => {
            setSearchParams({ dialog: "test" });
          }}
        >
          Make Visible
        </button>
        Visit{" "}
        <a href="https://start.solidjs.com" target="_blank">
          start.solidjs.com
        </a>{" "}
        to learn how to build SolidStart apps.
      </p>
    </main>
  );
}
  1. click Make visible button
  2. isVisibleSelector does not update ui, but triggers createEffect
  3. isVisibleFunction does both

Context 馃敠

I added ssr to my site to improve seo and realized my dialogs stopped working, narrowed it down to createSelector

Your environment 馃寧

System:
    OS: Linux 6.18 Manjaro Linux
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 44.81 GB / 62.73 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 25.8.0 - /home/x/.config/nvm/versions/node/v25.8.0/bin/node
    npm: 11.11.0 - /home/x/.config/nvm/versions/node/v25.8.0/bin/npm
    pnpm: 10.32.0 - /home/x/.local/share/pnpm/pnpm
  npmPackages:
    @solidjs/meta: ^0.29.4 => 0.29.4
    @solidjs/router: ^0.15.0 => 0.15.4
    @solidjs/start: 1.3.2 => 1.3.2
    solid-js: ^1.9.5 => 1.9.11
    vinxi: ^0.5.7 => 0.5.11

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions