Hooks

Hooks

defineHook({ name?, layers?, setup })

Status: Current.

Hooks package reusable reactive logic. Component and hook layer access uses the same alias-record model.

Typed Hook

export const useCurrentUser = defineHook({
  name: 'useCurrentUser',
  layers: { auth: AuthLayer } as const,
  setup({ computed, layers }) {
    const auth = layers.auth.service('auth');
    return {
      label: computed(() => auth.currentUser().name),
    };
  },
});

The layer must already be registered at the application composition root. Missing bindings fail before hook setup executes.

Hook Context

Member	Purpose
config	Typed input supplied by the caller.
signal, computed	Reactive state and derivation.
watchEffect	Lifecycle-owned reactive effect.
onMount	Register work with an active component lifecycle.
layers	Typed alias or list accessor.
scope	Register finalizers and dispose hook resources.
use	Compose another hook function.
runAsync	Execute typed asynchronous work.

Configuration

const useThreshold = defineHook<
  { minimum: number },
  { accepted: (value: number) => boolean }
>({
  setup({ config }) {
    return { accepted: (value) => value >= config.minimum };
  },
});

Cleanup

Reactive effects created through the hook context are disposed with the active scope. Register external resources with scope finalizers or component lifecycle callbacks.

Ecosystem Hooks

@effuse/use provides browser-focused hooks for storage, media queries, online state, intervals, debounce/throttle, event listeners, element visibility, window size, and related concerns. Browser-only hooks must retain explicit SSR guards.

Related

• Layers And Capabilities
• Reactivity, Signals, And Effects
• Packages And Tooling