# 
[](https://www.npmjs.com/package/@react-hookz/web)
[](https://www.npmjs.com/package/@react-hookz/web)
[](https://github.com/react-hookz/web/actions)
[](https://app.codecov.io/gh/react-hookz/web)
× **[DISCORD](https://discord.gg/Fjwphtu65f)** ×
**[RELEASES](https://github.com/react-hookz/web/releases)** ×
---
`@react-hookz/web` is a library of general-purpose React hooks built with care and SSR compatibility
in mind.
## Install
This one is pretty simple, everyone knows what to do:
```shell
npm i @react-hookz/web
# or
yarn add @react-hookz/web
```
As hooks was introduced to the world in React 16.8, `@react-hookz/web` requires - you guessed it -
`react` and `react-dom` 16.8+.
Also, as React does not support IE, `@react-hookz/web` don't either.
## Usage
> This package distributed with ESNext language level and ES modules system.
> It means that depending on your browser target you might need to transpile it. Every major
> bundler provides a way to transpile `node_modules` fully or partially.
> Address your bundler documentation for more details.
You can import hooks two ways:
```ts
// from the root of package
import {useMountEffect} from '@react-hookz/web';
// or single hook directly
import {useMountEffect} from '@react-hookz/web/useMountEffect/index.js';
```
In case your bundler supports tree-shaking (most of modern does) - both variants are equal and only
necessary code will get into your bundle. Direct hook imports should be considered otherwise.
## Migrating from react-use
`@react-hookz/web` was built as
a [spiritual successor](https://github.com/streamich/react-use/issues/1974) of `react-use` by one of
its former maintainers.
## Hooks list
- #### Callback
- [**`useDebouncedCallback`**](./src/useDebouncedCallback/index.ts)
— Makes passed function debounced, otherwise acts like `useCallback`.
- [**`useRafCallback`**](./src/useRafCallback/index.ts)
— Makes passed function to be called within next animation frame.
- [**`useThrottledCallback`**](./src/useThrottledCallback/index.ts)
— Makes passed function throttled, otherwise acts like `useCallback`.
- #### Lifecycle
- [**`useConditionalEffect`**](./src/useConditionalEffect/index.ts)
— Like `useEffect` but callback invoked only if given conditions match a given predicate.
- [**`useCustomCompareEffect`**](./src/useCustomCompareEffect/index.ts)
— Like `useEffect` but uses a provided comparator function to validate dependency changes.
- [**`useDebouncedEffect`**](./src/useDebouncedEffect/index.ts)
— Like `useEffect`, but passed function is debounced.
- [**`useDeepCompareEffect`**](./src/useDeepCompareEffect/index.ts)
— Like `useEffect` but uses `@react-hookz/deep-equal` comparator function to validate deep
dependency changes.
- [**`useFirstMountState`**](./src/useFirstMountState/index.ts)
— Returns a boolean that is `true` only on first render.
- [**`useIntervalEffect`**](./src/useIntervalEffect/index.ts)
— Like `setInterval` but in the form of a React hook.
- [**`useIsMounted`**](./src/useIsMounted/index.ts)
— Returns a function that yields current mount state.
- [**`useIsomorphicLayoutEffect`**](./src/useIsomorphicLayoutEffect/index.ts)
— Like `useLayoutEffect` but falls back to `useEffect` during SSR.
- [**`useMountEffect`**](./src/useMountEffect/index.ts)
— Run an effect only when a component mounts.
- [**`useRafEffect`**](./src/useRafEffect/index.ts)
— Like `useEffect`, but the effect is only run within an animation frame.
- [**`useRerender`**](./src/useRerender/index.ts)
— Returns a callback that re-renders the component.
- [**`useThrottledEffect`**](./src/useThrottledEffect/index.ts)
— Like `useEffect`, but the passed function is throttled.
- [**`useTimeoutEffect`**](./src/useTimeoutEffect/index.ts)
— Like `setTimeout`, but in the form of a React hook.
- [**`useUnmountEffect`**](./src/useUnmountEffect/index.ts)
— Run an effect only when a component unmounts.
- [**`useUpdateEffect`**](./src/useUpdateEffect/index.ts)
— An effect hook that ignores the first render (not invoked on mount).
- [**`useLifecycleLogger`**](./src/useLifecycleLogger/index.ts)
— This hook provides logging when the component mounts, updates and unmounts.
- #### State
- [**`useControlledRerenderState`**](./src/useControlledRerenderState/index.ts)
— Like `useState`, but its state setter accepts an extra argument, that allows cancelling
renders.
- [**`useCounter`**](./src/useCounter/index.ts)
— Tracks a numeric value and offers functions for manipulating it.
- [**`useDebouncedState`**](./src/useDebouncedState/index.ts)
— Like `useState` but its state setter is debounced.
- [**`useFunctionalState`**](./src/useFunctionalState/index.ts)
— Like `useState` but instead of raw state, a state getter function is returned.
- [**`useList`**](./src/useList/index.ts)
— Tracks a list and offers functions for manipulating it.
- [**`useMap`**](./src/useMap/index.ts) — Tracks the
state of a `Map`.
- [**`useMediatedState`**](./src/useMediatedState/index.ts)
— Like `useState`, but every value set is passed through a mediator function.
- [**`usePrevious`**](./src/usePrevious/index.ts) —
Returns the value passed to the hook on previous render.
- [**`usePreviousDistinct`**](./src/usePreviousDistinct/index.ts) —
Returns the most recent distinct value passed to the hook on previous renders.
- [**`useQueue`**](./src/useQueue/index.ts) —
A state hook implementing FIFO queue.
- [**`useRafState`**](./src/useRafState/index.ts) —
Like `React.useState`, but state is only updated within animation frame.
- [**`useRenderCount`**](./src/useRenderCount/index.ts) —
Tracks component's render count including first render.
- [**`useSet`**](./src/useSet/index.ts) — Tracks the
state of a `Set`.
- [**`useToggle`**](./src/useToggle/index.ts) — Like
`useState`, but can only be `true` or `false`.
- [**`useThrottledState`**](./src/useThrottledState/index.ts)
— Like `useState` but its state setter is throttled.
- [**`useValidator`**](./src/useValidator/index.ts)
— Performs validation when any of the provided dependencies change.
- #### Navigator
- [**`useNetworkState`**](./src/useNetworkState/index.ts)
— Tracks the state of the browser's network connection.
- [**`useVibrate`**](./src/useVibrate/index.ts)
— Provides vibration feedback using the Vibration API.
- [**`usePermission`**](./src/usePermission/index.ts)
— Tracks the state of a permission.
- #### Miscellaneous
- [**`useSyncedRef`**](./src/useSyncedRef/index.ts)
— Like `useRef`, but it returns an immutable ref that contains the actual value.
- [**`useCustomCompareMemo`**](./src/useCustomCompareMemo/index.ts)
— Like `useMemo` but uses provided comparator function to validate dependency changes.
- [**`useDeepCompareMemo`**](./src/useDeepCompareMemo/index.ts)
— Like `useMemo` but uses `@react-hookz/deep-equal` comparator function to validate deep
dependency changes.
- [**`useHookableRef`**](./src/useHookableRef/index.ts)
— Like `useRef` but it is possible to define handlers for getting and setting the value.
- #### Side-effect
- [**`useAsync`**](./src/useAsync/index.ts)
— Executes provided async function and tracks its results and errors.
- [**`useAsyncAbortable`**](./src/useAsyncAbortable/index.ts)
— Like `useAsync`, but also provides `AbortSignal` as first function argument to the async
function.
- [**`useCookieValue`**](./src/useCookieValue/index.ts)
— Manages a single cookie.
- [**`useLocalStorageValue`**](./src/useLocalStorageValue/index.ts)
— Manages a single LocalStorage key.
- [**`useSessionStorageValue`**](./src/useSessionStorageValue/index.ts)
— Manages a single SessionStorage key.
- #### Sensor
- [**`useIntersectionObserver`**](./src/useIntersectionObserver/index.ts)
— Observe changes in the intersection of a target element with an ancestor element or with the
viewport.
- [**`useMeasure`**](./src/useMeasure/index.ts) —
Uses `ResizeObserver` to track an element's dimensions and to re-render the component when they
change.
- [**`useMediaQuery`**](./src/useMediaQuery/index.ts)
— Tracks the state of a CSS media query.
- [**`useResizeObserver`**](./src/useResizeObserver/index.ts)
— Invokes a callback whenever `ResizeObserver` detects a change to the target's size.
- [**`useScreenOrientation`**](./src/useScreenOrientation/index.ts)
— Checks if the screen is in `portrait` or `landscape` orientation and automatically re-renders
on orientation change.
- [**`useDocumentVisibility`**](./src/useDocumentVisibility/index.ts)
— Tracks document visibility state.
- #### Dom
- [**`useClickOutside`**](./src/useClickOutside/index.ts)
— Triggers a callback when the user clicks outside a target element.
- [**`useEventListener`**](./src/useEventListener/index.ts)
— Subscribes an event listener to a target element.
- [**`useKeyboardEvent`**](./src/useKeyboardEvent/index.ts)
— Invokes a callback when a keyboard event occurs on the chosen target.
- [**`useWindowSize`**](./src/useWindowSize/index.ts)
— Tracks the inner dimensions of the browser window.
## Contributors
