Coming from React

This page maps React habits to Lumiose. The linked pages have the full rules.

#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).

#From React to Lumiose

#What goes away

• The rules of hooks. signal, computed, effect and onCleanup 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.

#Mistakes that replace them

Destructuring props is fine: ({ title }) compiles to reads of props.title, which stay reactive. Copying a signal's value into a variable is what freezes it.

#Example

A clock that pauses, in React:

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]);

  useEffect(() => {
    document.title = `${label}: ${new Date(now).toLocaleTimeString()}`;
  }, [label, now]);

  const toggle = useCallback(() => setPaused((p) => !p), []);
  return <button onClick={toggle}>{paused ? "Resume" : "Pause"}</button>;
}

The same clock in Lumiose. The effects list no dependencies, and the handler needs no useCallback:

import { 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);
  });

  // Reads label (props.label) and now(): re-runs when either changes.
  effect(() => {
    document.title = `${label}: ${new Date(now()).toLocaleTimeString()}`;
  });

  return <button onClick={() => paused.update((p) => !p)}>{paused() ? "Resume" : "Pause"}</button>;
}

#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.
• Sharing state: context, defineState, and what replaces Jotai, Zustand and Valtio.
• Async components: data loading, re-runs, <Suspense> and isPending().