@gilbarbara/hooks NPM

@gilbarbara/hooks

A collection of React hooks designed to simplify state management, side effects, and UI interactions.

Setup

npm i @gilbarbara/hooks

Requires React 16.8+ (Hooks support). TypeScript support is included.

Features

Custom versions of useEffect, useCallback, and useMemo with deep comparison.
Built-in debouncing and throttling for smooth performance (useDebounce, useThrottle).
Advanced state management (useSetState, useToggle, usePersistentState).
Debugging tools to optimize re-renders (useDataChanges, useRenderCount).
Flexible API integrations (useFetch with retries and backoff support).

Example

Here's an example of using useToggle, useThrottle, and useFetch together:

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 (
    <div>
      <button onClick={toggle}>{isEnabled ? 'Disable' : 'Enable'}</button>
      <button onClick={throttledFetch}>Fetch Data</button>
      {error ? <p>Error: {error.message}</p> : <p>Data: {JSON.stringify(data)}</p>}
    </div>
  );
}

Hooks

React Hooks with Deep Comparison

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.

State

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.

Effects

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.

Lifecycles

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.

Refs and DOM

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.

UI and Interactions

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.

Performance and Optimization

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.

Timers

Hooks for managing time-based operations.

useInterval — Execute the callback repeatedly with the specified delay.
useTimeout — Execute the callback after the specified delay.

Data Fetching

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.

Debugging and Development

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.

Utilities

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:

{
  "rules": {
    "react-hooks/exhaustive-deps": [
      "warn", {
        "additionalHooks": "(useDebounce|useUpdateEffect|use.*DeepCompare)"
      }
    ]
  }
}