useRouteStore

useRouteStore

Solid.js only. For React/Preact/Vue/Svelte/Angular use useRoute.

1. Overview

• Name: useRouteStore
• Purpose: Subscribe to all route changes with granular, property-level reactivity via Solid's createStore + reconcile
• When to use: When a component reads individual fields of the route state and should not re-run when unrelated fields change — e.g., reading state.route.name without reacting to state.route.params changes

2. Signature

function useRouteStore(): RouteState

import { useRouteStore } from "@real-router/solid";

3. Return value

Returns a Solid store (RouteState) — a reactive proxy where each property is tracked independently:

interface RouteState {
  route: State | undefined;
  previousRoute: State | undefined;
  navigator: Navigator;
}

Access fields directly (no accessor call needed — stores are not wrapped in Accessor<T>):

const state = useRouteStore();
state.route?.name       // tracked: re-runs only when `name` changes
state.route?.params.id  // tracked: re-runs only when `params.id` changes

4. Comparison with useRoute

	useRoute()	useRouteStore()
Returns	Accessor<RouteState>	RouteState (store)
Read syntax	state().route.name	state.route?.name
Re-renders on	every navigation	only changed properties
Use case	simple components	performance-sensitive, fine-grained reactivity

5. Examples

Basic usage

import { useRouteStore } from "@real-router/solid";
import { createEffect } from "solid-js";

function PageTitle() {
  const state = useRouteStore();

  // Re-runs only when route.name changes — not on params-only navigations
  createEffect(() => {
    document.title = state.route?.name ?? "App";
  });

  return <h1>{state.route?.name}</h1>;
}

Reading params with granular tracking

function UserProfile() {
  const state = useRouteStore();

  return (
    <div>
      {/* Each expression tracked independently */}
      <h1>User: {state.route?.params.id}</h1>
      <p>Previous: {state.previousRoute?.name}</p>
    </div>
  );
}

Conditional rendering

function Layout() {
  const state = useRouteStore();

  return (
    <Show when={state.route}>
      {(route) => <p>Current: {route().name}</p>}
    </Show>
  );
}

6. How it works

useRouteStore wraps createRouteSource(router) in createStoreFromSource, which:

1. Initialises the store with createStore({ ...source.getSnapshot() })
2. Subscribes to source updates; on each emit calls setState(reconcile(source.getSnapshot()))
3. reconcile diffs the new snapshot against the existing store and updates only changed paths — unchanged object references are preserved, so Solid's fine-grained tracking does not notify unaffected derivations
4. Calls onCleanup(unsubscribe) — the subscription is released when the reactive owner is disposed

7. Caching

The underlying createRouteSource is cached per router instance in @real-router/sources. Multiple components calling useRouteStore() with the same router share one source — one router subscription, one reconcile call per navigation.

8. Notes

• Must be called inside a reactive owner (component body or createRoot) — createStoreFromSource calls onCleanup
• route may be undefined while the router is unstarted or stopped; guard with Show or optional chaining
• For node-scoped granular reactivity use useRouteNodeStore
• For whole-value signal-based reactivity use useRoute

See also

• useRouteNodeStore — same pattern, scoped to a specific route node
• useRoute — accessor-based, re-renders on every navigation
• Solid Integration Guide — Store-Based Hooks