Hooks
Import React hooks from react (aliased to @kog/react); Kog-specific hooks from @kog/react or @kog/ui as noted. Semantics differ from React in six deliberate ways — read Thinking in Kog first.
React-compatible
| Hook | Notes in Kog |
|---|---|
useState(initial) | Returns [value, setValue]. Writes are synchronous; UI flush batched. Functional updates supported. |
useReducer(reducer, init) | As React. |
useEffect(fn, deps?) | Runs after mount; re-runs when deps change; cleanup on unmount/re-run. [] = mount-only. Omitted deps = auto-tracked (lint warning). |
useLayoutEffect | Same, flushed synchronously before the frame. |
useMemo(fn, deps) | A true derived value (recomputes when deps change, cached otherwise). |
useCallback(fn) | Identity — functions are already stable. Kept for compatibility. |
useRef(initial) | Stable { current }, non-reactive. With ref={...} on a component, .current is the native widget handle (escape hatch). |
createContext / useContext | Fine-grained: consumers update without re-running. |
useImperativeHandle, forwardRef | Minimal support. |
useSyncExternalStore | Shim over a store subscription. |
Not present: useTransition, useDeferredValue (identity shim), Suspense-related hooks. There is no concurrency to schedule around — updates are already minimal.
Timing
| Hook | Signature |
|---|---|
useInterval(fn, ms | null) | Auto-cleans; ms may be reactive; null pauses. |
useTimeout(fn, ms | null) | Same contract. |
useAnimatedValue(initial, config?) | A value driven by the native animation engine — zero JS per frame. Bind it to a widget prop (<View width={anim} />), then anim.animate(to, { duration, easing }). Values are in the prop's native units — px for size/position, and 0–255 for opacity (not the 0–1 used for static opacity). |
Device & app
| Hook | Returns |
|---|---|
useDisplay() | { width, height, dpi, rotation } |
useDevice() | { chip, freeHeap, battery?, rssi? } (reactive) |
useColorScheme() | 'light' | 'dark' (reactive) |
useStorage(key, default) | Persistent useState backed by device KV storage (debounced writes). |
useOTAStatus() | Update progress/state for self-updating apps. |
useFocusEffect(fn) / useIsFocused() | Screen focus lifecycle — see Navigation. |
useNavigation() / useRoute() | Navigation — see Navigation. |
Hardware
useButton, useDigitalRead, useDigitalWrite, useAnalogRead, usePWM — documented in Hardware. Read hooks return accessors in v1 (call them: mv(), pressed()); useDigitalWrite is [value, setValue] like useState.