@gilbarbara/hooks

   

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

Setup

``bash
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:

`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 (



);
}
`

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)"
}
]
}
}
``

License

MIT