Hooks

The useAsync() hook simplifies asynchronous logic management (like API calls) by providing reactive states for pending, success, and error outcomes.

The useBatteryStatus() hook provides real-time information about the device's battery level and charging status.

The useCookie() hook provides a wrapper around the native document.cookie API, making it easier to read, update, and remove cookies within your React components.

The useDebounce() hook is essential for performance optimization. It allows you to delay the processing of a value (like a search query) until the user has stopped typing for a specified duration, reducing unnecessary API calls or re-renders.

The useDeviceDetect() hook categorizes the user's device into mobile, tablet, or desktop based on screen width media queries.

The useEventListener() hook simplifies adding event listeners to the window, document, or DOM elements. It handles binding and unbinding automatically, ensuring no memory leaks occur when components unmount.

The useFavicon() hook allows you to programmatically change the browser tab icon (favicon). It automatically restores the original favicon when the component unmounts.

The useFetch() hook provides a declarative way to fetch data from APIs. It encapsulates the boilerplate logic for handling async requests, including loading indicators, error catching, and request cancellation cleanup.

The useGeolocation() hook tracks the user‘s geographic location using the Geolocation API. It handles permissions, loading states, and updates automatically when the user moves (using watchPosition).

The useHistory() hook provides a robust way to manage state with time-travel capabilities. It allows you to track past states, undo changes, redo reverted changes, and reset the history stack.

The useHover() hook simplifies tracking the hover state of DOM elements. It uses a callback ref to attach listeners, ensuring it works seamlessly even if elements are conditionally rendered.

The useIdle() hook tracks user activity (mouse movement, keyboard input, scrolling, etc.) and determines if the user has been inactive for a specified duration.

The useIntersectionObserver() hook provides a declarative way to track the visibility of a DOM element within the viewport. It‘s ideal for lazy loading, infinite scrolls, or triggering animations.

The useInterval() hook makes using setInterval inside React components declarative and safe. It solves the common "stale closure" problem where the interval callback cannot access the latest state props.

The useIsMounted() hook allows you to check if a component is still mounted before performing state updates or side effects. This is particularly useful for avoiding memory leak warnings in asynchronous operations.

The useLocalStorage() hook acts like useState but persists the value to the browser‘s localStorage. It automatically parses JSON values and synchronizes state updates across other tabs and windows.

The useLockBodyScroll() hook prevents the user from scrolling the main page body. This is essential when displaying modals, sidebars, or full-screen menus to prevent the background content from moving while the user interacts with the overlay.

The useLongPress() hook allows you to detect sustained clicks or touches on an element. It differentiates between a standard "click" and a "long press," making it ideal for secondary actions, context menus, or specialized game controls.

The useMediaQuery() hook allows you to programmatically check if the current viewport matches a specific CSS media query string.

The useMount() hook is a semantic alias for useEffect(fn, []). It ensures that the provided callback runs strictly once when the component is first mounted to the DOM.

The useMousePosition() hook tracks the cursor‘s current position on the global window object. It returns the X and Y coordinates, updating them in real-time as the user moves their mouse.

The useNetworkQuality() hook tracks the user's connection status, providing real-time updates on effective network type, downlink speed, and RTT latency.

The usePrevious() hook stores the previous value of a state or prop. It is useful for comparing values between renders, detecting direction of changes, or triggering effects only when a value changes in a specific way.

The useScript() hook simplifies loading external JavaScript files dynamically. It handles the creation of the script tag, prevents duplicate loading of the same script, and provides the current loading status (idle, loading, ready, error).

The useScrollPosition() hook tracks the global window scroll coordinates in real-time. It is useful for creating reading progress bars, sticky navigation menus, or triggering animations as the user scrolls down the page.

The useSessionStorage() hook works exactly like useLocalStorage, but persists data only for the duration of the page session. Data is lost when the tab or browser is closed, but survives page reloads and restores.

The useThrottle() hook limits the execution rate of a value update. Unlike debounce (which waits for a pause), throttle ensures updates happen at a regular interval (e.g., every 500ms) while the user is active. This is ideal for scroll events, resizing, or rate-limiting API calls during continuous input.

The useTimeout() hook is a declarative wrapper around setTimeout. It handles setting up and clearing the timer automatically, and allows you to pause or clear the timeout by passing null as the delay.

The useToggle() hook provides a simple way to manage boolean state. It returns the current state and a function to toggle it. The toggle function can also accept a specific boolean value to manually set the state.

The useUnmount() hook allows you to run a cleanup function right before the component is removed from the DOM. It acts as a semantic alias for the cleanup phase of useEffect(..., []).

The useUpdateEffect() hook is a drop-in replacement for useEffect that ignores the initial render. It only executes the effect when the component updates and its dependencies change.

The useWhyDidYouUpdate() hook is a dev-tool utility that helps you understand why a component re-rendered by comparing previous and current props.

The useWindowSize() hook returns the current width and height of the browser window. It uses useSyncExternalStore for optimal performance and concurrent rendering compatibility.