如何创建不会立即执行的React自定义Hook？

要实现类似Apollo useLazyQuery的自定义Hook，核心是让Hook内部仅维护状态，不自动执行业务逻辑，而是返回一个可主动调用的函数来触发逻辑，同时暴露状态供组件使用。以下是完整的实现方案：

完整实现示例 #

1. 定义自定义Hook #

import { useState } from 'react';

const useLazyHook = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState(undefined);
  const [error, setError] = useState(null); // 新增错误状态，增强健壮性

  // 定义主动触发的函数，这里以异步请求为例
  const getData = async (params) => {
    setIsLoading(true);
    setError(null);
    try {
      // 替换为实际的业务逻辑：比如API请求、数据处理等
      const response = await fetch(`https://api.example.com/data?${new URLSearchParams(params)}`);
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err.message || '请求失败');
    } finally {
      setIsLoading(false);
    }
  };

  // 返回触发函数和状态集合
  return [getData, { isLoading, data, error }];
};

2. 在组件中使用 #

function App() {
  const [fetchData, { isLoading, data, error }] = useLazyHook();

  const handleFetch = () => {
    // 主动调用触发函数，可传入参数
    fetchData({ id: 123 });
  };

  return (
    <div>
      <button onClick={handleFetch} disabled={isLoading}>
        {isLoading ? '加载中...' : '获取数据'}
      </button>
      
      {error && <p style={{ color: 'red' }}>{error}</p>}
      
      {data && (
        <div>
          <h3>获取到的数据：</h3>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

关键设计点 #

• 延迟执行：Hook初始化时不会自动调用getData，只有组件主动调用这个函数才会触发逻辑
• 状态封装：将isLoading、data、error等状态封装在Hook内部，组件只需关心触发和使用状态
• 参数传递：触发函数支持传入参数，满足不同场景的动态需求
• 错误处理：增加错误状态捕获，避免未处理的异常影响组件

内容的提问来源于stack exchange，提问作者Ammar yasser