State & Data Flow

One store per instance

Each instance carries a single store. Components read from it with selectors and write to it with actions; there is no component-local state that Docks manages for you. This keeps the render path predictable — given the same store, you get the same tree.

1const dock = createDock({
2    target: "#app",
3    state: { query: "", selected: null },
4})
5 
6dock.set("query", "deploy")
7console.log(dock.get("query")) // "deploy"

Selectors

A selector is a pure function from state to a value. Components subscribe to selectors rather than to the whole store, so a write only re-renders the components whose selected value actually changed.

• Keep selectors pure and cheap — they run on every write.

• Return primitives or stable references; a fresh object every call defeats the equality check.

• Compose selectors instead of reaching into nested state from a component.

Derived values

Use derive() for values computed from other values. Derived values are cached and recomputed only when their inputs change.

1const visible = derive(
2    [s => s.items, s => s.query],
3    (items, query) => items.filter(i => i.name.includes(query))
4)

Writes are batched

Multiple writes in the same tick are coalesced into one render. You do not need to batch manually, and you should not rely on reading a value back synchronously after writing it in the same frame.

Data loading

Docks does not ship a data layer. Fetch however you like and write the result into the store — the render path is the same whether the data came from a network call, local storage, or a literal.

1. Write a loading flag before the request starts.

2. Await the request outside of any render.

3. Write the result and clear the flag in a single update.