Understanding and Using React Hooks: Concepts, Built‑in Hooks, and Custom Hook Development

Concept Overview

React introduced Hooks in version 16.7.0‑alpha and officially released them in 16.8.0. A React Hook is a special function that can be used inside function components or as a utility function to encapsulate reusable logic.

Why Hooks Matter

Hooks give function components lifecycle‑like capabilities, allowing them to manage state and side effects without converting to class components, thus expanding their applicability.

Built‑in Hooks

Basic Hooks

useState, useEffect, useContext

Additional Hooks

useRef, useCallback, useMemo, useReducer, useLayoutEffect, useImperativeHandle, useDebugValue

useState

Creates state and returns a tuple of the current value and a setter function.

export default function HookDemo() {
  const [count, changeCount] = useState(0);
  return (
{count}
{ changeCount(Math.ceil(Math.random() * 1000)); }}>
        改变count
);
}

useEffect

Handles side effects; runs after render and can clean up on unmount. The second argument controls when it runs.

const [count, changeCount] = useState(0);
useEffect(() => {
  message.info(`count发生变动，最新值为${count}`);
}, [count]);

By passing an empty dependency array, the effect mimics componentDidMount; returning a function mimics componentWillUnmount.

useEffect(() => {
  message.info('我只在页面挂载时打印');
  return () => { message.info('我只在页面卸载时打印'); };
}, []);

useCallback

Memoizes a callback function, recreating it only when its dependencies change, useful for avoiding unnecessary re‑executions in useEffect.

const calculateCount = useCallback(() => {
  if (count1 && count2) {
    return count1 * count2;
  }
  return count1 + count2;
}, [count1, count2]);

useRef

Provides a mutable ref object whose .current property persists across renders, useful for storing DOM nodes or mutable values without causing re‑renders.

const countRef = useRef(count);
// Updating ref does not trigger a render
countRef.current.count = 10;

useMemo

Memoizes the result of a computation (or even a component) and recomputes only when its dependencies change, improving performance.

const calculateCount = useMemo(() => {
  message.info('重新生成计算结果');
  return count1 * 10;
}, [count1]);

Custom Hook Development

Basic Counter Hook

A custom hook must start with use . The example creates a counter with increase, decrease, and reset functions.

function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);
  const decrease = () => setCount(count - 1);
  const increase = () => setCount(count + 1);
  const resetCounter = () => setCount(0);
  return [count, { decrease, increase, resetCounter }];
}

export default function MyHooksView() {
  const [count, controlCount] = useCounter(10);
  return (
当前数量：{count}
减少
增加
重置
);
}

Hook Returning DOM (Modal Example)

Shows a hook that returns a modal component and a toggle function.

function useModal() {
  const [visible, setVisible] = useState(false);
  const toggleModalVisible = () => setVisible(!visible);
  return ([
弹窗内容
,
    toggleModalVisible
  ]);
}

export default function HookDemo() {
  const [modal, toggleModal] = useModal();
  return (
{modal}
打开弹窗
);
}

Final Summary

Hooks are not meant to replace class components but to increase the adoption of functional components, clearly separating generic utility logic from business‑specific logic and encouraging developers to encapsulate reusable behavior as custom hooks.

Readers are invited to share their thoughts and discuss further.