@react-hookz/web vs react-hook-form vs react-query vs react-spring vs react-use

Building a Robust React Architecture: Forms, Data, Animation, and Utilities

This comparison evaluates five essential React libraries that address different layers of application development. react-hook-form manages complex form state with minimal re-renders. react-query (now part of TanStack) handles server-state synchronization and caching. react-spring provides physics-based animations for interactive UIs. react-use and @react-hookz/web are collections of utility hooks for common side effects and browser APIs. While the latter two overlap in functionality, the former three serve distinct, specialized roles in a modern stack.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package	Downloads	Stars	Size	Issues	Publish	License
Package	Downloads	Stars	Size	Issues	Publish	License
@react-hookz/web	0	2,216	150 kB	33	3 months ago	MIT
react-hook-form	0	44,874	1.57 MB	6	10 days ago	MIT
react-query	0	50,453	2.26 MB	155	4 years ago	MIT
react-spring	0	29,176	7.23 kB	74	5 months ago	MIT
react-use	0	43,991	454 kB	668	4 months ago	Unlicense

React Architecture Essentials: Forms, Data, Animation, and Utilities

Building a production-grade React application requires selecting the right tools for specific problems. This comparison covers five popular packages that solve different challenges: form management, server-state handling, animation, and general utility hooks. While react-use and @react-hookz/web compete directly, the others serve unique roles in a complete stack.

🛠️ Utility Hooks: `react-use` vs `@react-hookz/web`

Both react-use and @react-hookz/web provide collections of hooks for common tasks like accessing local storage or tracking component lifecycle. The main difference lies in maintenance and bundle optimization.

react-use was one of the first comprehensive hook libraries. It is stable but loads all hooks unless configured carefully.

// react-use: Importing a lifecycle hook
import { useMount } from 'react-use';

function Component() {
  useMount(() => {
    console.log('Mounted');
  });
  return <div>Hello</div>;
}

@react-hookz/web is designed with tree-shaking in mind. Each hook is exported individually to reduce bundle size.

// @react-hookz/web: Importing a lifecycle hook
import { useMount } from '@react-hookz/web';

function Component() {
  useMount(() => {
    console.log('Mounted');
  });
  return <div>Hello</div>;
}

react-hook-form does not provide general utility hooks. It focuses solely on form state. You would use standard useEffect for lifecycle tasks.

// react-hook-form: Using standard React for lifecycle
import { useForm } from 'react-hook-form';
import { useEffect } from 'react';

function Form() {
  const { register } = useForm();
  useEffect(() => {
    console.log('Mounted');
  }, []);
  return <input {...register('name')} />;
}

react-query does not provide general utility hooks. It focuses on server-state. Lifecycle tasks are handled via standard React hooks.

// react-query: Using standard React for lifecycle
import { useQuery } from 'react-query';
import { useEffect } from 'react';

function Data() {
  const { data } = useQuery('key', fetcher);
  useEffect(() => {
    console.log('Mounted');
  }, []);
  return <div>{data}</div>;
}

react-spring does not provide general utility hooks. It focuses on animation values. Lifecycle tasks are handled via standard React hooks.

// react-spring: Using standard React for lifecycle
import { useSpring } from 'react-spring';
import { useEffect } from 'react';

function Animated() {
  const props = useSpring({ opacity: 1 });
  useEffect(() => {
    console.log('Mounted');
  }, []);
  return <div style={props}>Hello</div>;
}

📝 Managing State: Local vs Server vs Form

Each library manages state differently based on its purpose. Comparing them highlights where each fits in your architecture.

react-use handles local browser state like localStorage.

// react-use: Local storage state
import { useLocalStorage } from 'react-use';

function Profile() {
  const [value, setValue] = useLocalStorage('key', 'default');
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

@react-hookz/web also handles local browser state with similar API.

// @react-hookz/web: Local storage state
import { useLocalStorage } from '@react-hookz/web';

function Profile() {
  const [value, setValue] = useLocalStorage('key', 'default');
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

react-hook-form manages form input state without re-rendering on every change.

// react-hook-form: Form state
import { useForm } from 'react-hook-form';

function Login() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} />
      <button>Submit</button>
    </form>
  );
}

react-query manages server-state with caching and background updates.

// react-query: Server state
import { useQuery } from 'react-query';

function User() {
  const { data } = useQuery('user', () => fetch('/api/user').then(r => r.json()));
  return <div>{data?.name}</div>;
}

react-spring manages animation state interpolating values over time.

// react-spring: Animation state
import { useSpring } from 'react-spring';

function Box() {
  const props = useSpring({ 
    from: { opacity: 0 }, 
    to: { opacity: 1 } 
  });
  return <div style={props}>Fade In</div>;
}

⚠️ Maintenance and Deprecation Status

It is critical to check the long-term viability of these tools before adopting them.

react-query has moved to the TanStack organization. The react-query package on npm is considered legacy. New projects should install @tanstack/react-query. The API is similar, but the package name changed.

// Legacy (Not recommended for new projects)
import { useQuery } from 'react-query';

// Modern (Recommended)
import { useQuery } from '@tanstack/react-query';

react-use is still maintained but sees less innovation compared to newer alternatives. It remains a valid choice for stable projects.

@react-hookz/web is actively developed with a focus on modern React patterns and TypeScript correctness.

react-hook-form and react-spring are both actively maintained and widely adopted in the ecosystem.

📊 Summary Table

Package	Primary Role	Tree-Shakable	Legacy Warning
`@react-hookz/web`	Utility Hooks	✅ Yes	❌ No
`react-hook-form`	Form Management	✅ Yes	❌ No
`react-query`	Server State	✅ Yes	⚠️ Use @tanstack/react-query
`react-spring`	Animation	✅ Yes	❌ No
`react-use`	Utility Hooks	❌ Partial	❌ No

💡 Final Recommendation

These packages are not direct competitors except for react-use and @react-hookz/web. For a modern stack, use @react-hookz/web for utilities, react-hook-form for forms, @tanstack/react-query for data, and react-spring for motion. Avoid mixing react-use and @react-hookz/web — pick one to prevent duplication. Always prefer the TanStack version of react-query for new development to ensure future support.

How to Choose: @react-hookz/web vs react-hook-form vs react-query vs react-spring vs react-use

@react-hookz/web:
Choose @react-hookz/web if you need a modern, tree-shakable collection of utility hooks with strong TypeScript support. It is ideal for new projects where bundle size and type safety are priorities over legacy compatibility.
react-hook-form:
Choose react-hook-form when building forms with complex validation rules or dynamic fields. It is the best option for performance-sensitive forms because it avoids re-rendering the entire component tree on every keystroke.
react-query:
Choose react-query (or its successor @tanstack/react-query) if you need to manage server-state, caching, and background updates. It is essential for data-heavy dashboards but note that new projects should use the TanStack namespace.
react-spring:
Choose react-spring when you need smooth, physics-based animations that respond to user input. It is suitable for interactive elements like draggables, transitions, and gesture-driven interfaces.
react-use:
Choose react-use if you are maintaining an older codebase that already depends on it or need a specific hook not found elsewhere. For new projects, consider modern alternatives due to potential bundle size concerns.

Popular Comparisons

@react-hookz/web

react-hook-form

react-query

react-spring

react-use

README for @react-hookz/web

× DISCORD × RELEASES ×

@react-hookz/web is a library of general-purpose React hooks built with care and SSR compatibility in mind.

Install

This one is pretty simple, everyone knows what to do:

npm i @react-hookz/web
# or
yarn add @react-hookz/web

As hooks was introduced to the world in React 16.8, @react-hookz/web requires - you guessed it - react and react-dom 16.8+. Also, as React does not support IE, @react-hookz/web don't either.

Usage

This package distributed with ESNext language level and ES modules system. It means that depending on your browser target you might need to transpile it. Every major bundler provides a way to transpile node_modules fully or partially. Address your bundler documentation for more details.

You can import hooks two ways:

// from the root of package
import {useMountEffect} from '@react-hookz/web';
// or single hook directly
import {useMountEffect} from '@react-hookz/web/useMountEffect';

In case your bundler supports tree-shaking (most of modern does) - both variants are equal and only necessary code will get into your bundle. Direct hook imports should be considered otherwise.

Migrating from react-use

@react-hookz/web was built as a spiritual successor of react-use by one of its former maintainers.

Hooks list

Callback
- useDebouncedCallback — Makes passed function debounced, otherwise acts like useCallback.
- useRafCallback — Makes passed function to be called within next animation frame.
- useThrottledCallback — Makes passed function throttled, otherwise acts like useCallback.
Lifecycle
- useConditionalEffect — Like useEffect but callback invoked only if given conditions match a given predicate.
- useCustomCompareEffect — Like useEffect but uses a provided comparator function to validate dependency changes.
- useDebouncedEffect — Like useEffect, but passed function is debounced.
- useDeepCompareEffect — Like useEffect but uses @react-hookz/deep-equal comparator function to validate deep dependency changes.
- useFirstMountState — Returns a boolean that is true only on first render.
- useIntervalEffect — Like setInterval but in the form of a React hook.
- useIsMounted — Returns a function that yields current mount state.
- useIsomorphicLayoutEffect — Like useLayoutEffect but falls back to useEffect during SSR.
- useMountEffect — Run an effect only when a component mounts.
- useRafEffect — Like useEffect, but the effect is only run within an animation frame.
- useRerender — Returns a callback that re-renders the component.
- useThrottledEffect — Like useEffect, but the passed function is throttled.
- useTimeoutEffect — Like setTimeout, but in the form of a React hook.
- useUnmountEffect — Run an effect only when a component unmounts.
- useUpdateEffect — An effect hook that ignores the first render (not invoked on mount).
- useLifecycleLogger — This hook provides logging when the component mounts, updates and unmounts.
State
- useControlledRerenderState — Like useState, but its state setter accepts an extra argument, that allows cancelling renders.
- useCounter — Tracks a numeric value and offers functions for manipulating it.
- useDebouncedState — Like useState but its state setter is debounced.
- useFunctionalState — Like useState but instead of raw state, a state getter function is returned.
- useList — Tracks a list and offers functions for manipulating it.
- useMap — Tracks the state of a Map.
- useMediatedState — Like useState, but every value set is passed through a mediator function.
- usePrevious — Returns the value passed to the hook on previous render.
- usePreviousDistinct — Returns the most recent distinct value passed to the hook on previous renders.
- useQueue — A state hook implementing FIFO queue.
- useRafState — Like React.useState, but state is only updated within animation frame.
- useRenderCount — Tracks component's render count including first render.
- useSet — Tracks the state of a Set.
- useToggle — Like useState, but can only be true or false.
- useThrottledState — Like useState but its state setter is throttled.
- useValidator — Performs validation when any of the provided dependencies change.
Navigator
- useNetworkState — Tracks the state of the browser's network connection.
- useVibrate — Provides vibration feedback using the Vibration API.
- usePermission — Tracks the state of a permission.
Miscellaneous
- useSyncedRef — Like useRef, but it returns an immutable ref that contains the actual value.
- useCustomCompareMemo — Like useMemo but uses provided comparator function to validate dependency changes.
- useDeepCompareMemo — Like useMemo but uses @react-hookz/deep-equal comparator function to validate deep dependency changes.
- useHookableRef — Like useRef but it is possible to define handlers for getting and setting the value.
Side-effect
- useAsync — Executes provided async function and tracks its results and errors.
- useAsyncAbortable — Like useAsync, but also provides AbortSignal as first function argument to the async function.
- useCookieValue — Manages a single cookie.
- useLocalStorageValue — Manages a single LocalStorage key.
- useSessionStorageValue — Manages a single SessionStorage key.
Sensor
- useIntersectionObserver — Observe changes in the intersection of a target element with an ancestor element or with the viewport.
- useMeasure — Uses ResizeObserver to track an element's dimensions and to re-render the component when they change.
- useMediaQuery — Tracks the state of a CSS media query.
- useResizeObserver — Invokes a callback whenever ResizeObserver detects a change to the target's size.
- useScreenOrientation — Checks if the screen is in portrait or landscape orientation and automatically re-renders on orientation change.
- useDocumentVisibility — Tracks document visibility state.
Dom
- useClickOutside — Triggers a callback when the user clicks outside a target element.
- useEventListener — Subscribes an event listener to a target element.
- useKeyboardEvent — Invokes a callback when a keyboard event occurs on the chosen target.
- useWindowSize — Tracks the inner dimensions of the browser window.

Contributors

_{Anton Zinovyev}	_{Joe Duncko}	_{Arttu Olli}	_{Kyle Holmberg}	_{Andreas Nel}	_{Rey Wang}	_{Jake Ketcheson}	_{Joshua Stewart}
_{Justin Wallace}	_{Konrad Linkowski}	_Null	_{Mykola Kolomoyets}	_Null	_{Paul Sachs}	_Fengkx	_{Lennon Wang}
_{Daniel Friesen}	_{Clément P.}	_Null	_{Brian Fletcher}	_{Birant İyigün}	_{Bart Lens}	_{Axel Bocciarelli}	_{Anders Kjær Damgaard}