Collection of useful React hooks
npm install @gilbarbara/hooks   
A collection of React hooks designed to simplify state management, side effects, and UI interactions.
``bash`
npm i @gilbarbara/hooks
Requires React 16.8+ (Hooks support). TypeScript support is included.
- Custom versions of useEffect, useCallback, and useMemo with deep comparison.useDebounce
- Built-in debouncing and throttling for smooth performance (, useThrottle).useSetState
- Advanced state management (, useToggle, usePersistentState).useDataChanges
- Debugging tools to optimize re-renders (, useRenderCount).useFetch
- Flexible API integrations ( with retries and backoff support).
Here's an example of using useToggle, useThrottle, and useFetch together:
`tsx
import { useToggle, useThrottle, useFetch } from '@gilbarbara/hooks';
function Component() {
const [isEnabled, { toggle }] = useToggle(false);
const throttledFetch = useThrottle(() => {
fetch('/api/data');
}, 1000);
const { data, error } = useFetch('/api/data');
return (
Error: {error.message}
:Data: {JSON.stringify(data)}
}Hooks
$3
Custom React's built-in hooks deep comparison on their dependencies.
useCallbackDeepCompare — A custom
useCallback with deep comparison.
useEffectDeepCompare — A custom useEffect with deep comparison.
useMemoDeepCompare — A custom useMemo with deep comparison.$3
Hooks for managing and persisting application state.
usePersistentState — State hook that persists the state in localStorage.
useSetState — Returns a setState that merges object changes into the current state.
useToggle — State hook to track the value of a boolean.
$3
Hooks for managing side effects and extending React’s useEffect.
useEffectOnce — Execute the effect only once.
useHasChanged — Detect value changes and optionally trigger a callback.
useIsomorphicLayoutEffect — Use useLayoutEffect on the client and useEffect on the server.
useUpdateEffect — A custom useEffect that doesn’t run on mount.
$3
Hooks for managing component lifecycle events such as mounting and unmounting.
useMount — Execute a callback when the component is mounted.
useUnmount — Execute a callback when the component is unmounted.
useLifecycleHooks — Execute the callbacks when the component mount and unmount.
useIsMounted — Check if the component is still mounted.
useIsFirstRender — Check if it’s the first mount.
$3
Hooks for managing refs and interacting with the DOM.
useLatest — Get a ref containing the most recent value.
useMergeRefs — Merge multiple refs into one.
usePrevious — Track the previous value of a variable.
$3
Hooks for managing user interactions and responsive design.
useBreakpoint — Get responsive breakpoints for adaptive layouts.
useClickOutside — Execute the callback when clicking outside the target element.
useElementMeasure — Get element dimensions using the ResizeObserver API.
useMediaQuery — Detect media query changes.
useIntersectionObserver — Detects the visibility of an element on the viewport using the IntersectionObserver API.
useResizeObserver — Get element dimensions using the ResizeObserver API.
useWindowSize — Get the window dimensions. Updates on resize.
$3
Hooks for optimizing performance by reducing unnecessary renders or controlling execution frequency.
useDebounce — Defer function execution until the delay has elapsed since the last invocation.
useMemoizedValue — Get a stabilized value that only updates when the original value is truly different.
useThrottle — Return a throttled function that invokes fn once per every ms.
useThrottleValue — Return a throttled value that changes only once per every ms.
$3
Hooks for managing time-based operations.
useInterval — Execute the callback repeatedly with the specified delay.
useTimeout — Execute the callback after the specified delay.
$3
Hooks for working with APIs and third-party scripts.
useFetch — Make a request with fetch. It supports dynamic URLs, caching, retries, and much more.
useScript — Dynamically load a script tag and append it to the document.body.
$3
Hooks for debugging, monitoring, and optimizing component behavior.
useDataChanges — Detect which prop/state changes are causing a component to re-render.
useRenderCount — Log how many times the component has rendered.
useUpdate — Return a function that re-renders the component when called.
$3
useLocalStorage — Interact with the browser’s localStorage API.
useLocation — Track the browser’s location.
useOnce — Execute code just once before the component renders.ESLint Configuration
To take full advantage of hooks with dependencies, add the following rule to your ESLint config:
`json
{
"rules": {
"react-hooks/exhaustive-deps": [
"warn", {
"additionalHooks": "(useDebounce|useUpdateEffect|use.*DeepCompare)"
}
]
}
}
``MIT