Skip to content

Solid v1: createSelector doesn't work with hydration #2940

Description

@birkskyum

Moved from

cc @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

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions