🇺🇸 English version | 🇷🇺 Русская версия

📖 Documentation

A set of smart React hooks for performant UIs

---

💎 Highlights

• Fewer re-renders. Hooks update state only when needed: lazy flags, stable handlers and refs.
• Hybrid return. Many hooks can be used as a tuple or as an object — pick the shape you prefer.
• Clean effects. Subscriptions and cleanup are sensible by default; behavior is predictable.
• SSR-ready. Browser APIs are touched strictly inside effects.

---

📦 Installation

npm install @webeach/react-hooks

pnpm install @webeach/react-hooks

yarn add @webeach/react-hooks

---

📥 Import

import { useBoolean } from '@webeach/react-hooks/useBoolean';
import { useEffectCompare } from '@webeach/react-hooks/useEffectCompare';
import { useWindowEvent } from '@webeach/react-hooks/useWindowEvent';

// or
import {
  useBoolean,
  useEffectCompare,
  useWindowEvent,
} from '@webeach/react-hooks';

🌿 Tree‑shaking

• Every hook is available as an individual module path (@webeach/react-hooks/useX). Importing this way pulls only the code you need — the most predictable and compact option for any bundler (ESM and CJS).
• Named import from the package root (@webeach/react-hooks) supports tree‑shaking in bundlers that optimize ES modules (Vite/Rollup/esbuild/Webpack 5 in production). Unused exports will be removed at build time.
• For CommonJS projects, we recommend per‑module imports (require('@webeach/react-hooks/useX')) to avoid pulling extra code through the index.

---

🛠 Hooks

Alphabetical

useAsyncCallback, useAsyncHandler, useBoolean, useCallbackCompare, useCollection, useControlled, useDebounceCallback, useDebounceState, useDemandStructure, useDeps, useDOMEvent, useEffectCompare, useForceUpdate, useFrame, useFrameExtended, useImageLoader, useIntersectionObserver, useIsomorphicLayoutEffect, useLayoutEffectCompare, useLiveRef, useLocalStorage, useLoop, useMap, useMediaQuery, useMemoCompare, useNumber, useOutsideEvent, usePageTitle, usePageVisibility, usePatchDeepState, usePatchState, useRefEffect, useRefState, useResizeObserver, useSessionStorage, useSet, useStatus, useThrottleCallback, useThrottleState, useTimeout, useTimeoutExtended, useToggle, useUnmount, useViewportBreakpoint, useWindowEvent

By category

State — simple primitives

useControlled, useBoolean, useNumber, useToggle, useStatus

State — object patterns

usePatchDeepState, usePatchState

State — collections

useCollection, useMap, useSet

State — storage (persistence)

useLocalStorage, useSessionStorage

Timers, loops & frames

useFrame, useFrameExtended, useLoop, useTimeout, useTimeoutExtended

Rate limiting (throttle/debounce)

useDebounceCallback, useDebounceState, useThrottleCallback, useThrottleState

Async operations

useAsyncCallback, useAsyncHandler, useImageLoader

Dependency optimization

useDeps, useCallbackCompare, useEffectCompare, useLayoutEffectCompare, useMemoCompare, useIsomorphicLayoutEffect

Lifecycle

useEffectCompare, useLayoutEffectCompare, useUnmount

Refs

useLiveRef, useRefEffect

Events

useDOMEvent, useWindowEvent, useOutsideEvent

Observers

useIntersectionObserver, useResizeObserver

Page & document

useMediaQuery, usePageTitle, usePageVisibility, useViewportBreakpoint

Utilities

useDemandStructure, useForceUpdate, useRefState

---

🧩 Dependencies

This package has a single external dependency — @webeach/collection.

• It is used only by the useCollection hook.
• Other hooks do not import or require collection.

---

🔖 Releasing

Releases are automated with semantic-release.

Before publishing a new version, make sure that:

1. All changes are committed and pushed to main.
2. Commit messages follow Conventional Commits:

• feat: ... — new features
• fix: ... — bug fixes
• chore: ..., refactor: ..., etc. — as needed

3. The next version (patch, minor, major) is derived automatically from the commit types.

---

👤 Author

Developed and maintained by Ruslan Martynov.

Have an idea or found a bug? Open an issue or send a pull request.

---

📄 License

This package is distributed under the MIT License.