Why React Hooks Were Created and How to Choose Between ahooks and react-use

Why Hooks

Before introducing Hooks, React components can be created as class components or pure function components, and the React team prefers function components as simple data‑flow pipelines.

Pure function components lack state, lifecycle, this, and can only be pure functions, which limits them to UI rendering. Class components provide full features but become heavy and introduce patterns like render props, HOCs, and providers/consumers that lead to “wrapper hell”.

React Hooks were designed to give function components the ability to manage state and side effects without using class , enabling full‑featured components.

What Problems Hooks Solve

Hooks address many pain points accumulated over years of component development, such as the lack of a native way to attach reusable behavior (e.g., connecting to a store) and the “nested hell” created by providers, consumers, HOCs, and render‑props.

Hooks let you extract stateful logic from a component, test it in isolation, and reuse it without changing the component hierarchy.

Official Hooks

If you are new to Hooks, refer to the official React documentation.

Basic Hooks: useState, useEffect, useContext Additional Hooks: useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect,

useDebugValue

What is ahooks

Official site: https://ahooks.js.org/zh-CN

ahooks is a React Hooks library maintained by Ant Design, ICE, and Alibaba Sports teams. It provides high‑quality, commonly used Hooks to reduce code complexity and improve development efficiency, aiming to become a React infrastructure similar to antd/fusion.

Installation

# Install dependency
npm i ahooks --save

# Use Hook
import { useRequest } from 'ahooks';

Useful Hooks in ahooks

🔥 Asynchronous request: useRequest 🔥 Table: useAntdTable, useFusionTable 🔥 View: useDrag, useDrop, useDynamicList, useSelections, useVirtualList 🔥 Side effects: useDebounce, useDebounceFn, useInterval, useThrottle, useThrottleFn, useTimeout 🔥 Lifecycle: useDebounceEffect, useMount, useThrottleEffect, useTrackedEffect, useUnmount, useUnmountedRef, useUpdate, useUpdateEffect, useUpdateLayoutEffect 🔥 State: useUrlState, useBoolean, useControllableValue, useCookieState, useCountDown, useCounter, useHistoryTravel, useLocalStorageState, useMap, useNetwork, usePrevious, useSessionStorageState, useSet, useSetState, useToggle, useWebSocket, useWhyDidYouUpdate 🔥 DOM: useClickAway, useDocumentVisibility, useEventListener, useEventTarget, useExternal, useFavicon, useFullscreen, useHover, useInViewport, useKeyPress, useMouse, useResponsive, useScroll, useSize, useTextSelection, useTitle 🔥 Advanced: useCreation, useEventEmitter, useLockFn, usePersistFn, useReactive,

useSafeState

What is react-use

Developed by a well‑known author, stars 25.9K. GitHub: https://github.com/streamich/react-use

Installation

# Install dependency
npm i react-use --save

# Use Hook
import { useBattery } from 'react-use';

Useful Hooks in react-use

🔥 Sensors: useBattery, useGeolocation, useHover, useHoverDirty, useIdle, useKey, useKeyPress, useKeyboardJs, useKeyPressEvent, useLocation, useMedia, useMediaDevices, useMotion, useMouse, useMouseHovered, useNetwork, useOrientation, usePageLeave, useScroll, useSize, useStartTyping, useWindowScroll, useWindowSize 🔥 UI: useAudio, useClickAway, useCss, useDrop, useDropArea, useFullscreen, useSpeech, useVideo, useWait 🔥 Animation: useRaf, useSpring, useTimeout, useTween, useUpdate 🔥 Side effects: useAsync, useAsyncFn, useAsyncRetry, useBeforeUnload, useCopyToClipboard, useDebounce, useFavicon, useLocalStorage, useLockBodyScroll, useSessionStorage, useThrottle, useThrottleFn, useTitle 🔥 Lifecycle: useEffectOnce, useEvent, useLifecycles, useRefMounted, usePromise, useLogger, useMount, useUnmount, useUpdateEffect, useDeepCompareEffect 🔥 State: createMemo, useGetSet, useGetSetState, useObservable, useSetState, useToggle, useBoolean, useCounter, useNumber, useList,

useMap

Custom Hooks

Custom Hooks are simply functions that extract shared logic between two functions; they follow the same rules as built‑in Hooks.

The following example demonstrates a custom Hook that shows an error modal using Ant Design components.

import React, { useState, useEffect } from 'react';
import { Modal, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
interface IData {
  message: string
}

// Extract substring between two characters
function str_substr(start, end, str) {
  let firstIndex = str.indexOf(start);
  let lastIndex = str.lastIndexOf(end);
  return str.substring(firstIndex + 1, lastIndex);
}

const useErrModal = (data: string) => {
  const [dataSource, setDataSource] = useState<Array<IData>>([]);

  const tableContainer = () => (
    <Table size='small' dataSource={dataSource} columns={columns} pagination={false} />
  );

  const columns: ColumnsType<IData> = [
    {
      title: '错误明细',
      dataIndex: 'message',
      key: 'message',
    },
  ];

  // Split data string by [, ] and then by ', '
  let splitStr = str_substr('[', ']', data);
  let arr = splitStr.split(', ');
  let list = [];
  arr.map((item, key) => {
    list.push({ message: item });
  });
  setDataSource(list);

  Modal.warning({
    title: '错误信息汇总',
    okText: '确定',
    content: tableContainer,
  });
};

export default useErrModal;

References

[1] ahooks: https://ahooks.js.org/zh-CN

[2] react-use: https://github.com/streamich/react-use

[3] Hooks detailed guide: https://www.jianshu.com/p/d600f749bb19

[4] Official Hooks documentation: https://react.docschina.org/docs/hooks-intro.html