Hooks

Zebflow provides standard Preact-compatible hooks via the "zeb" import.

import { useState, useEffect, useCallback, useMemo, useRef } from "zeb";

useState

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

useEffect

useEffect(() => {
  const interval = setInterval(() => setCount(c => c + 1), 1000);
  return () => clearInterval(interval);
}, []);

Page state bridge

Templates can sync state with behavior files via window.__rweSetPageState:

// In a behavior .ts file
window.__rweSetPageState({ items: fetchedItems });

// In the TSX template — state updates trigger re-render
export default function Page() {
  const [items, setItems] = useState([]);
  // items will update when behavior calls __rweSetPageState
  return <ul>{items.map(i => <li key={i.id}>{i.name}</li>)}</ul>;
}

Custom hooks

Build reusable hooks the standard way:

function useDebounce(value, delay) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);
  return debounced;
}