State

import { signal, effect } from "koyojs/State";

const [count, setCount] = signal(0);

effect(() => console.log(count()));  // logs 0, then again on every change

setCount(1);              // logs 1
setCount((n) => n + 1);   // logs 2 — updater form
setCount(2);              // silent: Object.is(2, 2) — not a change

// Objects mutated in place need equals: false
const [items, setItems] = signal<string[]>([], { equals: false });
effect(() => render(items()));
setItems((list) => {
  list.push("new");       // same array reference
  return list;            // still notifies
});

// To store a function AS the value, use the updater form —
// a bare function argument is treated as an updater
const [handler, setHandler] = signal<() => void>(() => {});
setHandler(() => myFunction);   // stores myFunction

import { signal, memo, effect } from "koyojs/State";

const [items, setItems] = signal<string[]>([]);
const count = memo(() => items().length);

effect(() => console.log(count()));

// Swapping in a different list of the same length does not log again —
// the memo recomputed, but the result was equal
setItems(["a", "b"]);   // logs 2
setItems(["c", "d"]);   // silent

// Expensive work stays behind one stable read
const sorted = memo(() => [...rows()].sort(byName));
effect(() => renderTable(sorted()));
effect(() => updateCount(sorted().length));
// sorted() computed once per change, not once per consumer

import { signal, effect } from "koyojs/State";

const [id, setId] = signal(1);

const dispose = effect(() => {
  const controller = new AbortController();
  fetch(`/user/${id()}`, { signal: controller.signal });
  return () => controller.abort();  // before the next run, and on dispose
});

setId(2);    // aborts the first request, starts the second
dispose();   // aborts the second, stops the effect

// Dependencies are tracked per run, not declared once
const [showDetail, setShowDetail] = signal(false);
const [detail, setDetail] = signal("");

effect(() => {
  if (!showDetail()) return;   // detail() never read on this pass
  console.log(detail());       // so writing detail() does not re-run it
});

import { signal, effect, batch } from "koyojs/State";

const [first, setFirst] = signal("Ada");
const [last, setLast]   = signal("Byron");

effect(() => console.log(`${first()} ${last()}`));

// Without batch: two writes, two runs — including "Ada Lovelace"
setFirst("Augusta");
setLast("Lovelace");

// With batch: one run, no intermediate state observed
batch(() => {
  setFirst("Augusta");
  setLast("Lovelace");
});

// Reads inside the batch see earlier writes from the same batch
batch(() => {
  setFirst("Grace");
  console.log(first());   // "Grace"
});

import { signal, effect, untrack } from "koyojs/State";

const [message, setMessage] = signal("");
const [sessionId] = signal("abc123");

effect(() => {
  // Re-runs when message changes, never when sessionId does
  send(message(), untrack(() => sessionId()));
});

// Common use: read current state to decide, without subscribing to it
effect(() => {
  const next = queue();
  if (untrack(() => isPaused())) return;
  process(next);
});

import { signal, effect, onCleanup } from "koyojs/State";

const [delay, setDelay] = signal(1000);

effect(() => {
  const timer = setInterval(tick, delay());
  onCleanup(() => clearInterval(timer));
});

setDelay(500);   // clears the old interval, starts a new one

// Several cleanups in one scope all run, in registration order
effect(() => {
  const socket = connect();
  onCleanup(() => socket.close());

  const handler = () => socket.send("ping");
  window.addEventListener("focus", handler);
  onCleanup(() => window.removeEventListener("focus", handler));
});

// Outside a reactive scope this throws rather than leaking
onCleanup(() => {});   // KoyoStateError

import { signal, effect, createRoot } from "koyojs/State";

const [count, setCount] = signal(0);

const stop = createRoot((dispose) => {
  effect(() => render(count()));
  effect(() => syncToStorage(count()));
  return dispose;
});

setCount(1);   // both effects run
stop();        // both effects stop, all cleanups run

// Scoping a whole feature so it can be unmounted as a unit
function mountWidget(el: Element) {
  return createRoot((dispose) => {
    effect(() => el.textContent = String(count()));
    return dispose;
  });
}

const unmount = mountWidget(node);
unmount();

import { component, useState, useEffect } from "koyojs/State";
import { $ } from "koyojs/DOM";

const app = component(() => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `${count} clicks`;
  }, [count]);

  $("#count").text(String(count));
  $("#inc").off("click").on("click", () => setCount((n) => n + 1));
});

app.dispose();   // stops re-rendering, runs cleanups

// Breaking the rules of hooks throws instead of corrupting state
component(() => {
  if (someCondition) useState(0);   // conditional hook
  useRef(null);                     // → KoyoStateError naming the slot
});

import { component, useState } from "koyojs/State";

component(() => {
  const [count, setCount] = useState(0);
  const [user]  = useState(() => loadUser());  // lazy — runs once

  setCount((n) => n + 1);   // updater form
  setCount(5);              // direct

  console.log(count);       // a plain number, not count()
});

// To store a function as the value, use the updater form —
// a bare function is treated as an updater, and a bare
// function `initial` as a lazy initialiser
const [fn, setFn] = useState<() => void>(() => noop);
setFn(() => myHandler);

import { component, useState, useEffect } from "koyojs/State";

component(() => {
  const [query, setQuery] = useState("");

  useEffect(() => {
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);                        // once, on mount

  useEffect(() => {
    search(query);
  }, [query]);                   // when query changes

  useEffect(() => {
    log("rendered");
  });                            // every render
});

import { component, useState, useMemo } from "koyojs/State";
import { signal } from "koyojs/State";

const [theme] = signal("light");

component(() => {
  const [rows] = useState(() => loadRows());

  const sorted = useMemo(() => [...rows].sort(byName), [rows]);

  // Reads a signal with an empty dep array — still stays correct,
  // because signal reads are tracked on top of deps
  const styled = useMemo(() => applyTheme(sorted, theme()), []);

  render(styled);
});

import { component, useRef, useState } from "koyojs/State";

component(() => {
  const renders = useRef(0);
  renders.current++;            // no re-render

  const node = useRef<Element | null>(null);
  const timer = useRef<number | undefined>(undefined);

  const [value, setValue] = useState("");

  // Debounce without re-rendering on every keystroke
  clearTimeout(timer.current);
  timer.current = setTimeout(() => search(value), 300);
});

import { component, useReducer } from "koyojs/State";

component(() => {
  const [count, dispatch] = useReducer(
    (n: number, action: "inc" | "dec" | "reset") =>
      action === "inc" ? n + 1 : action === "dec" ? n - 1 : 0,
    0,
  );

  dispatch("inc");
  dispatch("reset");
});

// Named transitions keep complex state readable
type Action =
  | { type: "add"; item: string }
  | { type: "remove"; index: number }
  | { type: "clear" };

component(() => {
  const [items, dispatch] = useReducer(
    (state: string[], action: Action) => {
      switch (action.type) {
        case "add":    return [...state, action.item];
        case "remove": return state.filter((_, i) => i !== action.index);
        case "clear":  return [];
      }
    },
    [],
  );

  dispatch({ type: "add", item: "first" });
});