Coming from React

This page maps React 19 habits to Lumiose's current API. The linked pages have the full rules. Using a React framework too? Coming from Next.js and Coming from React Router cover its side.

#Mental model

In React, a state change re-runs the component function. Hooks keep their state between runs by call order, and effects list their dependencies so React knows when to re-run them.

In Lumiose, the component body runs once per instance: it creates signals, effects and handlers, then returns JSX. JSX expressions that read signals compile to bindings that update their part of the DOM in place. When a signal changes, only the bindings, computeds and effects that read it run again. Local variables are ordinary variables, and a closure reads the current value because it calls count() when it runs (Components, Signals).

The exception is an async component: when a prop or signal read in its body changes, the body runs again, and signals created in the body start fresh (Async components).

Server first. Every component renders on the server unless a page says otherwise, as React Server Components do. A page ships no JavaScript until a usage site adds a client:* directive (<Clock client:load /> makes that one instance an island) or the route is an spa route, whose whole subtree hydrates and navigates on the client (Rendering modes). There is no "use client" file boundary: the same component is static on one page and interactive on another.

#What goes away

• The rules of hooks. signal, computed, effect, onCleanup and useContext are ordinary functions: call them in conditions, loops and helper functions. Nothing depends on call order.
• Dependency arrays. Effects and computeds subscribe to the signals they read, and collect them again on every run, so a dependency cannot be missing, and a branch that stops reading a signal stops depending on it.
• Stale closures. A handler or a timer callback calls count() when it runs, so it gets the current value. There is no closure from an older render to capture.
• Memoization. useMemo, useCallback and React.memo exist to limit re-renders, and there are none. Use computed only to cache an expensive derivation.
• Context re-renders. A context change does not re-render its consumers: provide a signal or a store, and only the code that reads it updates.

#From React to Lumiose

#What has no equivalent

#Example

A clock that pauses, in React 19:

function Clock({ label }: { label: string }) {
  const [now, setNow] = useState(Date.now());
  const [paused, setPaused] = useState(false);

  useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, [paused]);

  const toggle = useCallback(() => setPaused((p) => !p), []);
  return (
    <>
      <title>{`${label}: ${new Date(now).toLocaleTimeString()}`}</title>
      <button onClick={toggle}>{paused ? "Resume" : "Pause"}</button>
    </>
  );
}

The same clock in Lumiose. The effect lists no dependencies, the handler needs no useCallback, and the title updates in place:

// src/components/Clock.tsx
import { Title, effect, signal } from "lumiose";

export function Clock({ label }: { label: string }) {
  const now = signal(Date.now());
  const paused = signal(false);

  // Reads paused(): re-runs, after clearing the interval, when it flips.
  effect(() => {
    if (paused()) return;
    const id = setInterval(() => now.set(Date.now()), 1000);
    return () => clearInterval(id);
  });

  return (
    <>
      <Title>{`${label}: ${new Date(now()).toLocaleTimeString()}`}</Title>
      <button onClick={() => paused.update((p) => !p)}>{paused() ? "Resume" : "Pause"}</button>
    </>
  );
}

On a page, the directive makes this one usage interactive; the rest of the page stays server HTML without JavaScript:

// src/routes/clock/page.tsx
import { Clock } from "../../components/Clock.tsx";

export default function ClockPage() {
  return (
    <main>
      <h1>Lunch break</h1>
      <Clock client:load label="Lunch" />
    </main>
  );
}

#Common mistakes

Destructuring props is fine: ({ title }) and const { title, ...rest } = props compile to reads of props.title, which stay reactive. Copying a signal's value into a variable is what freezes it. <button {...props} /> renders props.children, as in React.

#Related

• Components: setup once, props, children and refs.
• Signals and reactivity: signal, computed, effect, owners and scheduling.
• JSX: bindings, compiled .map() and ternaries, and the React prop names that differ.
• Islands: client:* directives, serializable props and slots.
• Sharing state: context, defineState, and what replaces Jotai, Zustand and Valtio.
• Async components: data loading, re-runs, <Suspense> and isPending().
• Data and actions: form actions, submit(), actionData() and optimistic().