React Hook Composition for TMNL

Overview

Custom hooks encapsulate stateful logic, effects, and event handlers into reusable functions. In TMNL, hooks bridge Effect services (via effect-atom) with React components, providing ergonomic interfaces for complex systems.

Key Insight: Hooks compose behavior, not UI. They return data and operations, letting components decide presentation.

Canonical Sources

TMNL Implementations

• useSlider — /src/lib/slider/v1/hooks/useSlider.ts (comprehensive hook interface)
  • Local atom state via Atom.make()
  • Event dispatch with reducer pattern
  • Derived values via useMemo
  • Handler composition with useCallback