Skip to content

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

@odama626

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

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