@kayelaa/canvas API - v0.2.15
    Preparing search index...

    Variable useStateConst

    useState: <T>(
        initialValue?: T,
        options?: { alwaysRecall?: boolean },
    ) => KaylaState<T> = ...

    Returns a stateful value wrapper with .get(), .set(), .add() (for numbers), etc.

    This hook MUST be called at the top level of a component function — never inside loops, conditions, nested functions, or callbacks. The call order of all hooks is strictly fixed across every refresh; reordering calls will corrupt internal state.

    Critical performance warning: Frequent .set() calls (especially inside useTick/usePaint) cause full component refresh → expensive re-execution, hook re-binding, child reconciliation. Do NOT use useState for position, velocity, timers, counters, health deltas, etc. → Use useSelf or useRef for hot loop data. → Reserve useState for infrequent structural changes (isDead, levelUp, gameOver, variant change → spawn different children).

    Type Declaration

      • <T>(initialValue?: T, options?: { alwaysRecall?: boolean }): KaylaState<T>

      • Type Parameters

        • T

          Type of the stored value

        Parameters

        • OptionalinitialValue: T

          Optional starting value

        • options: { alwaysRecall?: boolean } = {}

          Configuration

          • OptionalalwaysRecall?: boolean

            If true, every .set() triggers refresh (default: false)

        Returns KaylaState<T>

        Read-only state handle with .get(), .set(newValue, {recall?}), .add(delta, {recall?}), .lastChanged

    const isGameOver = useState(false);
    if (player.health <= 0) isGameOver.set(true); // → refresh → show game over screen children

    const x = useState(400);           // BAD — massive overhead
    x.set(x.get() + speed * dt);      // thrashing + GC pressure

    Settings

    Member Visibility