rn-hooksy

A lightweight, comprehensive collection of reusable React hooks for React Native — designed to handle common functionality, eliminate boilerplate, and boost developer productivity across iOS, Android, Windows, Web, and visionOS.

Whether you need async state management, timers, debouncing, history tracking, global state, or lifecycle utilities — rn-hooksy has you covered with battle-tested, well-typed hooks that work seamlessly in any React Native project.

Installation

npm install rn-hooksy

or with Yarn:

yarn add rn-hooksy

Peer Dependencies

To use all features of this library, you'll need to install the following peer dependencies:

npm install @react-native-clipboard/clipboard @react-native-community/netinfo

or with Yarn:

yarn add @react-native-clipboard/clipboard @react-native-community/netinfo

Platform-Specific Setup

iOS

After installing the dependencies, navigate to the ios folder and install CocoaPods dependencies:

cd ios && pod install && cd ..

Android

For Android, the native dependencies will be auto-linked. If you're using React Native < 0.60, you may need to manually link the packages:

npx react-native link @react-native-clipboard/clipboard
npx react-native link @react-native-community/netinfo

For React Native 0.60+, no additional steps are required for Android — the dependencies will be linked automatically.

Features

• 🔁 Lifecycle hooks — mount, unmount, update detection
• 📦 State hooks — counters, toggles, history, lists, sets, queues, maps
• ⏱️ Timer hooks — interval, timeout, debounce, throttle, RAF, countdown, stopwatch
• 🔀 Async hooks — loading/error/value states with retry support
• 🔄 Reducer & Context factories — shared state without Redux overhead
• ✅ Validation hooks — run validators reactively on state change
• ⚡ Performance hooks — memoization, render counting, RAF state, deep compare
• 📱 Device hooks — network, keyboard, dimensions, color scheme, permissions, clipboard
• 🛡️ Safety hooks — safe state, safe area insets, lock fn, mounted state
• 🌐 Cross-platform — works on iOS, Android, Windows, Web, and visionOS

Usage

import {
  useToggle,
  useCounter,
  useAsync,
  useDebounce,
  useInterval,
  createGlobalState,
} from 'rn-hooksy';

// Toggle between true/false
const [isVisible, toggle] = useToggle(false);

// Track a number with helpers
const [count, { inc, dec, reset }] = useCounter(0);

// Fetch data with loading/error/value state
const state = useAsync(async () => {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}, []);

// Debounce a search input
const [query, setQuery] = React.useState('');
useDebounce(
  () => {
    console.log('Search:', query);
  },
  500,
  [query]
);

// Run something every second
useInterval(() => {
  console.log('tick');
}, 1000);

// Globally shared state — no provider needed
const useGlobalCount = createGlobalState(0);
const [globalCount, setGlobalCount] = useGlobalCount();

Hooks Reference

| Hook | Description | iOS | Android | Windows | Web | visionOS | | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | :-: | :-----: | :-----: | :-: | :------: | | Lifecycle | | | | | | | useEffectOnce | Runs an effect only once on mount. | ✅ | ✅ | ✅ | ✅ | ✅ | | useUpdateEffect | Like useEffect but skips the first invocation on mount. | ✅ | ✅ | ✅ | ✅ | ✅ | | useUnmount | Calls a function when the component unmounts. | ✅ | ✅ | ✅ | ✅ | ✅ | | useMountedState | Returns a function to check if the component is currently mounted. | ✅ | ✅ | ✅ | ✅ | ✅ | | useFirstMountState | Returns true only on the very first render. | ✅ | ✅ | ✅ | ✅ | ✅ | | useIsomorphicLayoutEffect | useLayoutEffect on web; falls back to useEffect in React Native. | ⚠️ | ⚠️ | ⚠️ | ✅ | ⚠️ | | State | | | | | | | useToggle | Tracks a boolean value with a toggle function. | ✅ | ✅ | ✅ | ✅ | ✅ | | useCounter | Tracks a numeric value with inc/dec/set/reset helpers. | ✅ | ✅ | ✅ | ✅ | ✅ | | useDefault | Returns a fallback default when state is null or undefined. | ✅ | ✅ | ✅ | ✅ | ✅ | | useSetState | Merges partial updates into state like class this.setState. | ✅ | ✅ | ✅ | ✅ | ✅ | | useGetSet | Returns a getter instead of raw state to prevent stale closure bugs. | ✅ | ✅ | ✅ | ✅ | ✅ | | useGetSetState | A mix of useGetSet and useSetState. | ✅ | ✅ | ✅ | ✅ | ✅ | | useRafState | Updates state only inside a requestAnimationFrame callback. | ✅ | ✅ | ✅ | ✅ | ✅ | | usePrevious | Returns the previous value of a state or prop. | ✅ | ✅ | ✅ | ✅ | ✅ | | usePreviousDistinct | Like usePrevious but only updates when the value actually changes. | ✅ | ✅ | ✅ | ✅ | ✅ | | useLatest | Always returns the latest value via a ref — safe inside async callbacks. | ✅ | ✅ | ✅ | ✅ | ✅ | | useCombinedState | Updates individual object fields, merges changes, and resets to initial state. | ✅ | ✅ | ✅ | ✅ | ✅ | | useStateHistory | Stores previous state values and provides handles to travel back and forward through them. | ✅ | ✅ | ✅ | ✅ | ✅ | | useStateList | Provides circular iteration handles over a list of states. | ✅ | ✅ | ✅ | ✅ | ✅ | | useMediatedState | Like useState but runs every update through a mediator function. | ✅ | ✅ | ✅ | ✅ | ✅ | | Collections | | | | | | | useList | Tracks an array with push, remove, sort, filter, and more. | ✅ | ✅ | ✅ | ✅ | ✅ | | useSet | Tracks a Set with add/remove/toggle/clear helpers. | ✅ | ✅ | ✅ | ✅ | ✅ | | useQueue | Implements a simple FIFO queue with add/remove/first/last/size. | ✅ | ✅ | ✅ | ✅ | ✅ | | Validation | | | | | | | useStateValidator | Runs a validator function every time the state changes. | ✅ | ✅ | ✅ | ✅ | ✅ | | useMultiStateValidator | Runs a validator whenever any of the given multiple states change. | ✅ | ✅ | ✅ | ✅ | ✅ | | Reducers & Context | | | | | | | createReducer | Factory for useReducer with custom Redux-compatible middleware. | ✅ | ✅ | ✅ | ✅ | ✅ | | createReducerContext | Shared useReducer-like context hook across all components in a provider. | ✅ | ✅ | ✅ | ✅ | ✅ | | createStateContext | Shared useState-like context hook across all components in a provider. | ✅ | ✅ | ✅ | ✅ | ✅ | | createGlobalState | Creates globally shared state accessible from any component without a provider. | ✅ | ✅ | ✅ | ✅ | ✅ | | Performance & Memoization | | | | | | | createMemo | Factory that wraps a function with useMemo, returning a memoized hook. | ✅ | ✅ | ✅ | ✅ | ✅ | | useUpdate | Returns a function that forces the component to re-render. | ✅ | ✅ | ✅ | ✅ | ✅ | | useRendersCount | Tracks the total number of times a component has rendered. | ✅ | ✅ | ✅ | ✅ | ✅ | | Timers & Scheduling | | | | | | | useInterval | Declarative setInterval hook; pausable by setting delay to null. | ✅ | ✅ | ✅ | ✅ | ✅ | | useTimeout | Re-renders component after a timeout with cancel and reset handles. | ✅ | ✅ | ✅ | ✅ | ✅ | | useTimeoutFn | Calls a function after a delay with cancel and reset handles. | ✅ | ✅ | ✅ | ✅ | ✅ | | useDebounce | Delays invoking a function until dependencies stop changing. | ✅ | ✅ | ✅ | ✅ | ✅ | | useThrottle | Throttles a rapidly changing value by a given millisecond interval. | ✅ | ✅ | ✅ | ✅ | ✅ | | useThrottleFn | Invokes a function then delays subsequent calls until the wait period passes. | ✅ | ✅ | ✅ | ✅ | ✅ | | useHarmonicIntervalFn | Like useInterval but synchronizes multiple intervals to fire at the same time. | ✅ | ✅ | ✅ | ✅ | ✅ | | useRaf | Re-renders on every requestAnimationFrame; returns elapsed time percentage. | ✅ | ✅ | ✅ | ✅ | ✅ | | useRafLoop | Calls a function in a RAF loop without re-rendering; controllable start/stop. | ✅ | ✅ | ✅ | ✅ | ✅ | | Async | | | | | | | useAsync | Resolves an async function and tracks loading, value, and error. | ✅ | ✅ | ✅ | ✅ | ✅ | | useAsyncFn | Like useAsync but returns a callback to manually trigger execution. | ✅ | ✅ | ✅ | ✅ | ✅ | | useAsyncRetry | Like useAsync with an extra retry() method to re-run the function. | ✅ | ✅ | ✅ | ✅ | ✅ | | useAsyncEffect | Runs an async function inside a useEffect when dependencies change. | ✅ | ✅ | ✅ | ✅ | ✅ | | Misc | | | | | | | useError | Returns an error dispatcher that throws into React's error boundary. | ✅ | ✅ | ✅ | ✅ | ✅ | | useObservable | Tracks the latest value emitted by an Observable. | ✅ | ✅ | ✅ | ✅ | ✅ | | useMethods | Simplifies useReducer using plain method objects instead of action types. | ✅ | ✅ | ✅ | ✅ | ✅ | | React Native Specific | | | | | | | useBackHandler | Handles the Android hardware back button press. | ❌ | ✅ | ❌ | ❌ | ❌ | | Device & System | | | | | | | useAppState | Tracks app foreground/background/inactive state via AppState. | ✅ | ✅ | ✅ | ⚠️ | ✅ | | useKeyboard | Tracks keyboard visibility and height; platform-aware show/hide events. | ✅ | ✅ | ✅ | ✅ | ✅ | | useDimensions | Tracks window & screen dimensions; re-renders on rotation or resize. | ✅ | ✅ | ✅ | ✅ | ✅ | | useColorScheme | Tracks system light/dark mode; re-renders when the user changes theme. | ✅ | ✅ | ✅ | ✅ | ✅ | | useNetworkInfo | Tracks network connectivity, type, and internet reachability in real time. | ✅ | ✅ | ✅ | ✅ | ✅ | | usePermission | Checks and requests a single device permission; tracks its status reactively. | ✅ | ✅ | ❌ | ❌ | ✅ | | useClipboard | Reads from and writes to the device clipboard with setText and clear. | ✅ | ✅ | ✅ | ✅ | ✅ | | useSafeAreaInsets | Returns safe area insets (notch, home bar, status bar) for the current device. | ✅ | ✅ | ✅ | ✅ | ✅ | | useDeviceOrientation | Tracks whether the device is in portrait or landscape orientation. | ✅ | ✅ | ✅ | ✅ | ✅ | | useAccessibilityInfo | Tracks accessibility settings (screen reader, reduce motion, bold text, etc.). | ✅ | ✅ | ✅ | ✅ | ✅ | | useInteractionManager | Defers work until all JS animations and interactions have completed. | ✅ | ✅ | ✅ | ✅ | ✅ | | useImageDimensions | Fetches the intrinsic width and height of a remote or local image. | ✅ | ✅ | ✅ | ✅ | ✅ | | useLayout | Returns the layout dimensions of a component via onLayout. | ✅ | ✅ | ✅ | ✅ | ✅ | | useRefresh | Manages pull-to-refresh state with refreshing flag and onRefresh handler. | ✅ | ✅ | ✅ | ✅ | ✅ | | Extended State | | | | | | | useMap | Tracks a Map with set/delete/has/get/clear/reset — the Map equivalent of useSet. | ✅ | ✅ | ✅ | ✅ | ✅ | | useBoolean | Boolean state with explicit setTrue, setFalse, toggle, set actions. | ✅ | ✅ | ✅ | ✅ | ✅ | | useAsyncStorage | Persists state to AsyncStorage; auto-loads on mount and saves on change. | ✅ | ✅ | ❌ | ❌ | ✅ | | Timers & Counters | | | | | | | useCountdown | Counts down from a given number of seconds with start/pause/reset controls. | ✅ | ✅ | ✅ | ✅ | ✅ | | useStopwatch | Accurate stopwatch with start/stop/reset and hours/minutes/seconds breakdown. | ✅ | ✅ | ✅ | ✅ | ✅ | | Safety & Guards | | | | | | | useSafeState | Like useState but silently ignores updates after the component unmounts. | ✅ | ✅ | ✅ | ✅ | ✅ | | useLockFn | Prevents concurrent async calls — stops double-submit on buttons. | ✅ | ✅ | ✅ | ✅ | ✅ | | Utilities | | | | | | | useEventListener | Attaches any RN event emitter listener and removes it safely on unmount. | ✅ | ✅ | ✅ | ✅ | ✅ | | useDeepCompareEffect | Like useEffect but uses deep equality for deps — safe with objects/arrays. | ✅ | ✅ | ✅ | ✅ | ✅ | | useWhyDidYouUpdate | Dev-only debug hook that logs which props/state caused a re-render. | ✅ | ✅ | ✅ | ✅ | ✅ |

Legend

| Symbol | Meaning | | :----: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ✅ | Fully supported | | ⚠️ | Works with caveat — useIsomorphicLayoutEffect always resolves to useEffect (never useLayoutEffect) on non-browser platforms since typeof window === 'undefined' is true in React Native. | | ❌ | Not supported / no-op on this platform |

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

Made with create-react-native-library