pream/hooks

Types

Ref

A mutable reference object whose .current field persists across renders. At the JavaScript level, Ref(current: x) compiles to { current: x }.

Examples

let input_ref = use_ref("")
// In FFI or event handler: input_ref.current = "new value"

pub type Ref(a) {
  Ref(current: a)
}

Constructors

```
Ref(current: a)
```

Values

set_ref

</>

pub fn set_ref(ref: Ref(a), to: a) -> Ref(a)

use_callback

</>

pub fn use_callback(
  callback: fn() -> a,
  deps: List(dom.Native),
) -> fn() -> a

Memoizes a callback function. Only returns a new function reference when a dep in deps changes. Useful for passing stable callbacks to child components.

use_computed

</>

pub fn use_computed(compute: fn() -> a) -> signal.Signal(a)

Returns a read-only computed signal scoped to a component — same semantics as signal.computed

use_debug_value

</>

pub fn use_debug_value(value: a) -> Nil

Displays a custom label for a hook in the Preact devtools panel.

use_effect

</>

pub fn use_effect(
  run: fn() -> Nil,
  deps: List(dom.Native),
) -> Nil

Runs a side effect after render. The effect re-runs when any value in deps changes. Pass [] to run once on mount. Pass a list of dependencies like [dom.to_native(signal.value(sig))] to re-run when those values change.

Examples

// Run once on mount
use_effect(fn() { console.log("mounted") }, [])

// Re-run when a signal changes
use_effect(
  fn() { console.log("count changed") },
  [dom.to_native(signal.value(count))],
)

use_effect_cleanup

</>

pub fn use_effect_cleanup(
  run: fn() -> fn() -> Nil,
  deps: List(dom.Native),
) -> Nil

Like use_effect but the callback returns a cleanup function that runs before the next effect invocation and on unmount.

Examples

use_effect_cleanup(fn() {
  let interval_id = set_interval(fn() { ... }, 1000)
  fn() { clearInterval(interval_id) }
}, [])

use_id

</>

pub fn use_id() -> String

Returns a unique ID string for use in accessibility attributes (id, for, aria-labelledby, etc.).

use_imperative_handle

</>

pub fn use_imperative_handle(
  ref: Ref(a),
  create_handle: fn() -> a,
  deps: List(dom.Native),
) -> Nil

Customizes the instance value exposed through a ref. Typically used with forwardRef in component libraries.

use_layout_effect

</>

pub fn use_layout_effect(
  run: fn() -> Nil,
  deps: List(dom.Native),
) -> Nil

Like use_effect but runs synchronously after DOM mutations, before the browser paints. Use for measuring layout or other synchronous DOM reads.

use_layout_effect_cleanup

</>

pub fn use_layout_effect_cleanup(
  run: fn() -> fn() -> Nil,
  deps: List(dom.Native),
) -> Nil

Like use_layout_effect but with cleanup support.

use_memo

</>

pub fn use_memo(compute: fn() -> a, deps: List(dom.Native)) -> a

Memoizes a computed value. Only recomputes when a dep in deps changes. Useful for expensive calculations.

use_mount

</>

pub fn use_mount(run: fn() -> Nil) -> Nil

Runs run once on component mount. Equivalent to use_effect(run, []).

use_ref

</>

pub fn use_ref(initial: a) -> Ref(a)

Creates a Ref that persists for the lifetime of the component.

use_signal

</>

pub fn use_signal(initial: a) -> signal.Signal(a)

Creates a reactive signal scoped to a component. Returns the same Signal type as signal.new, composable with signal.value, signal.set, signal.map, etc.

use_signal_effect

</>

pub fn use_signal_effect(run: fn() -> Nil) -> Nil

Runs a reactive effect scoped to a component. The effect runs after every render where any signal read inside the effect has changed.

use_unmount

</>

pub fn use_unmount(run: fn() -> Nil) -> Nil

Runs run once on component unmount. Equivalent to use_effect_cleanup(fn() { fn() { run() } }, []).