@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

• Built-in debouncing and throttling for smooth performance (useDebounce, useThrottle).
• Advanced state management (useSetState, useToggle, useLocalStorageState).
• Debugging tools to optimize re-renders (useWhyDidYouUpdate, 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

State

Hooks for managing and persisting application state.

useSetState — Returns a setState that merges object changes into the current state.
useToggle — State hook to track the value of a boolean.
useLocalStorageState — State hook that persists the state in localStorage.

Effects

Hooks for managing side effects and extending React’s useEffect.

useDeepCompareEffect — Uses deep comparisons of its dependencies.
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.
useLifecycles — Execute callbacks during mount and unmount phases.
useIsMounted — Check if the component is still mounted.
useIsFirstMount — 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.

useClickOutside — Execute the callback when clicking outside the target element. 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.
useMeasure — Get element dimensions using the ResizeObserver API.
useResponsive — Get responsive breakpoints for adaptive layouts.
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.
useThrottle — Return a throttled function that invokes fn once per every ms.
useThrottleValue — Return a throttled value that changes only once per every ms.
useStableValue — Get a stabilized value that only updates when the original value is truly different.

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.

useRenderCount — Log how many times the component has rendered.
useWhyDidYouUpdate — Detect which prop/state changes are causing a component to re-render.
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.
useSingleton — Execute code just once before the component renders.

License

MIT