Getting Started

@lilib/hooks is a collection of practical React hooks covering async data, states, effects, callbacks, refs and browser APIs — written in TypeScript, compatible with React 16.8+, 17, 18 and 19, and safe for SSR and StrictMode.

Features

• More than 50 hooks covering async data, effects, states, callbacks, refs and browser APIs.
• Works with React 16.8+, 17, 18 and 19.
• SSR-safe — graceful fallbacks outside the browser.
• StrictMode-safe — idempotent effects with proper cleanup.
• Fully typed — written in TypeScript.
• Ships ESM, CJS and UMD builds.
• Tree-shakeable — bundlers can drop unused hooks from the ESM build.

Install

npm

npm install @lilib/hooks

pnpm

pnpm add @lilib/hooks

Quick start

import { useLoad } from "@lilib/hooks";

function UserProfile({ userId }: { userId: string }) {
  const { data, error, loading } = useLoad(
    () => fetch(`/users/${userId}`).then((response) => response.json()),
    [userId],
  );

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Something went wrong.</div>;
  }

  return <div>Hello, {data.name}!</div>;
}

For the full API reference and live examples, check out the docs of each hook listed below.

Hooks

Async

Hook	Description
useLoad	Load async data, typically for network requests.
useReload	Reload all useLoad requests that share the same key.
useSubmit	Submit network requests such as create, update and delete.

Effects

Hook	Description
useMount	Run an effect after the component is mounted.
useUpdate	Run an effect after the component updates (the initial mount is skipped).
useUnmount	Run an effect when the component unmounts.
useRefEffect	Like React.useEffect, but ReactRefs in the deps are dereferenced to ref.current before comparison.
useRefUpdate	Like useUpdate, but ReactRefs in the deps are dereferenced to ref.current before comparison.
useLayoutMount	Like useMount, but runs before the browser paints.
useLayoutUpdate	Like useUpdate, but runs before the browser paints.
useLayoutRefEffect	Like useRefEffect, but runs before the browser paints.
useLayoutRefUpdate	Like useRefUpdate, but runs before the browser paints.
useIsomorphicLayoutEffect	React.useLayoutEffect in the DOM, React.useEffect during SSR.

States

Hook	Description
useCache	Cache data for a certain period of time, with optional sync between components sharing the same cache instance.
useToggle	Manage a boolean value.
useSetState	Like this.setState of class components, merging partial state updates.
useSafeState	Like React.useState, but setting state after unmount is safe.
useDelayedValue	Delay updates to a value.
useMemoizedValue	Return the previous value until the value actually changes (deep comparison).
useThrottledValue	Throttle a value.
useDebouncedValue	Debounce a value.

Callbacks

Hook	Description
useRaf	Invoke a callback before the browser repaints.
useIdle	Invoke a callback when the browser is idle.
useAnimate	Run JavaScript animations.
useTimeout	Execute a callback after a delay.
useInterval	Run a callback repeatedly at a fixed interval.
usePersist	Keep a stable function identity while always calling the latest logic.
useRerender	Re-render the component manually, usually for mutable data.
useThrottle	Use a throttled callback.
useDebounce	Use a debounced callback.

Refs

Hook	Description
useLatestRef	A ref that always points to the latest value, avoiding stale closures in long-lived callbacks.
usePreviousRef	A ref that points to the value from the previous update.
useComposedRef	Compose multiple refs (objects or callbacks) into one.
useMountedRef	A ref that tells whether the component is mounted.
useUnmountedRef	A ref that tells whether the component is unmounted.

Browser

Hook	Description
useTitle	Set the document title.
useFavicon	Set the document favicon.
useOnline	Detect whether the network is online.
useDarkMode	Detect whether the system prefers a dark color scheme.
usePageVisible	Detect whether the page is visible, including bfcache restores.
useWindowFocus	Detect whether the window has focus.
useMatchMedia	Determine whether the document matches a media query.
useWindowSize	Get the window size.
useElementSize	Get the size of a DOM element.
useIntersecting	Detect whether an element intersects the viewport or a specified root.
useClickOutside	Trigger a callback when clicking outside the target area.
useEventListener	Set up an event listener on the target.
useResizeObserver	Observe an element's size changes.
useIntersectionObserver	Observe changes in an element's intersection with another element or the viewport.
useCookie	Get, set and/or remove cookies.
useLocalStorage	Get, set and/or remove localStorage.
useSessionStorage	Get, set and/or remove sessionStorage.

Changelog

See CHANGELOG.md for the full release history.

License

MIT