web

@react-hookz/web is a library of 50+ general-purpose React hooks built with SSR compatibility and correctness in mind. Born as a spiritual successor to the popular react-use library, built by one of its former maintainers, it aims to fix subtle bugs and inconsistent behavior that accumulate in loosely maintained hook collections while covering the same broad surface: state management, lifecycle control, sensors, DOM events, and browser storage.

Every hook ships with its own TypeScript types and dedicated DOM and SSR test suites, and can be imported either from the package root or as a single hook via a direct subpath import, so bundlers that don’t tree-shake still only pull in what’s used. The result is a dependable base layer for React apps that need debounced or throttled state, deep-comparison effects, resize/intersection observation, storage-backed state, and other repetitive patterns without hand-rolling them per project.

What You Get

• 50+ hooks spanning state, lifecycle, DOM, sensor, and browser-storage concerns, all importable from a single package.
• Full SSR safety via hooks like useIsomorphicLayoutEffect and useDocumentVisibility that avoid touching browser-only APIs during server rendering.
• Per-hook subpath imports (e.g. @react-hookz/web/useMountEffect) for bundlers that don’t tree-shake, keeping bundle size minimal.
• Dedicated DOM and SSR test suites for nearly every hook, run in CI on every push and pull request.
• A TypeScript-first API with full type inference for hook return values, options, and discriminated state unions.

Common Use Cases

• Debouncing or throttling state updates and callbacks in search inputs, form fields, or resize handlers.
• Persisting UI state to localStorage, sessionStorage, or cookies without re-implementing storage-sync logic.
• Tracking element visibility, size, or intersection for lazy-loading, infinite scroll, or sticky-header behavior.
• Managing async data-fetching flows (loading/success/error/abort) without pulling in a full data-fetching library.

Under The Hood

Architecture The repo is a flat collection of hook modules under src/, each hook in its own directory exporting an index.ts plus paired index.dom.test.ts and index.ssr.test.ts test files. There is no central orchestration: src/index.ts is a large barrel file that re-exports every hook grouped by category comments (Callback, Lifecycle, State, Navigator, Miscellaneous, Side-effect, Sensor, Dom). Shared logic (deep-equal comparison via the @ver0/deep-equal dependency, resolve-hook-state.ts, misc.ts, and shared testing helpers) lives in src/util/ and is reused across hooks, and some hooks compose others directly, such as useAsync building on useSyncedRef to avoid stale closures. This is a decoupled, modular library architecture rather than a layered application: each hook is independently testable and breaking one rarely cascades into others, though changes to the shared util layer would ripple across most stateful hooks.

Tech Stack Written in TypeScript against a React 16.8+ peer dependency, with a single production dependency, @ver0/deep-equal, for deep comparison hooks. The package is built with the vp (Vite+) toolchain wrapping tsc for an ESM-only dist, exposing per-hook subpath exports through package.json’s exports map. Tests run on Vitest with jsdom for DOM-environment coverage, linting uses oxlint via @ver0/oxlint-config, and CI runs on GitHub Actions with separate lint, typecheck, and coverage jobs gating releases handled by semantic-release.

Code Quality 121 test files were found under src/, mostly paired index.dom.test.ts and index.ssr.test.ts files per hook, meaning both browser and SSR-safety behavior are explicitly tested for nearly every hook. Reading useAsync/index.ts shows fully typed function overloads that distinguish whether an initialValue is supplied, an explicit discriminated AsyncState union instead of loose booleans for status modeling, and consistent use-prefixed, verb-first naming across the codebase. CI enforces linting and a dedicated tsc —noEmit typecheck alongside coverage reporting, and errors from async hooks are captured into typed state slots rather than swallowed. Overall this is a strongly typed, extensively tested codebase.

API Design The library positions itself explicitly as a spiritual successor to react-use, aiming to fix subtle bugs that had accumulated in that long-running staple. Its distinguishing design choices are a dual import strategy, root barrel import or a direct per-hook subpath import, which solves the bundle-size problem that index-heavy hook libraries create for bundlers without proper tree-shaking; split DOM/SSR test suites per hook that catch hydration issues at the hook level rather than relying on app-level smoke tests; and a consistent discriminated-union state-modeling pattern (see AsyncState) that gives callers exhaustive type narrowing instead of ad hoc booleans. Not fundamentally novel research, but a well-executed, DX-conscious refinement of a familiar hook-collection pattern, with docs linking every hook directly to its source and an explicit migration path from react-use.