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

A set of smart React hooks for performant UIs (React 18+)

---

💎 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

or

pnpm install @webeach/react-hooks

or

yarn add @webeach/react-hooks

---

📥 Import

ES Modules

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';

CommonJS

const { useBoolean } = require('@webeach/react-hooks/useBoolean');
const { useEffectCompare } = require('@webeach/react-hooks/useEffectCompare');
const { useWindowEvent } = require('@webeach/react-hooks/useWindowEvent');

// or
const { useBoolean, useEffectCompare, useWindowEvent } = require('@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.