同一React Hook多实例状态是否共享？状态变更如何触发useEffect？

需求与疑问 #

我设计了两个自定义Hook：

• useClient：内部维护range状态，对外暴露该状态和修改方法，允许UI组件修改
• useOrders：引入useClient的range状态，通过useEffect监听range变化来触发数据请求

想确认：当useClient的range状态变更时，useOrders里的useEffect会不会执行？同时想了解React Hooks中这种状态传播与effect触发的机制。

代码示例 #

useClient Hook #

const useClient = () => {
  const { id } = useParams();
  const [range, setRange] = useState({
    from: new Date().toISOString(),
    to: new Date().toISOString(),
  });

  return {
    range,
    setRange,
  };
};

export default useClient;

useOrders Hook #

import useClient from './useClient';

const useOrders = () => {
  const { range } = useClient();
  const { id } = useParams();
  const [orders, setOrders] = useState([]);
  const [pagination, setPagination] = useState({
    page: 1,
    limit: 10,
    total: 0,
    totalPages: 1,
  });

  const fetchOrders = useCallback(async () => {
    const params = {
      page: pagination.page,
      limit: pagination.limit,
      from: range.from,
      to: range.to,
    };

    try {
      const response = await api.get(`order/getOrders/${id}`, { params });
      if (response.data.success) {
        setOrders(response.data.orders);
        setPagination((prev) => ({
          ...prev,
          total: response.data.pagination.total,
          totalPages: response.data.pagination.totalPages,
        }));
      }
    } catch (error) {
      console.error('Fetching Orders error:', error);
    }
  }, [id, pagination.page, pagination.limit, range]);

  useEffect(() => {
    fetchOrders();
  }, [fetchOrders, range, pagination.page, pagination.limit]);

  return {
    orders,
    pagination,
    setPagination,
  };
};

export default useOrders;

核心解答 #

会执行。当UI组件调用setRange修改useClient里的range状态时，useOrders中通过useClient()获取到的range会变成新值，React检测到useEffect的依赖项（range或fetchOrders）发生变化，就会触发这个useEffect执行，进而调用fetchOrders发起请求。

状态传播与Effect触发机制 #

1. 自定义Hook的本质：自定义Hook是React逻辑复用的方式，每次调用自定义Hook，都会在当前组件的Hook调用栈中创建独立的状态和副作用。也就是说，useOrders调用useClient时，相当于把useClient里的逻辑内联到了useOrders所在的组件中，range状态属于该组件的状态的一部分。
2. 依赖数组的作用：useEffect的依赖数组是React判断是否要重新执行effect的依据。React会对依赖数组中的每个值进行浅比较（对比引用或基本类型值），如果任意一个依赖项和上一次渲染时的值不同，就会触发effect执行。
3. 状态变更的传播：当useClient的range状态更新，会导致调用useClient的组件（或Hook所在的组件）重新渲染。在重新渲染过程中，useOrders会重新调用useClient拿到新的range值，这个新值会触发useCallback重新生成fetchOrders函数（因为range是useCallback的依赖），同时useEffect的依赖数组里的range和fetchOrders都发生了变化，最终触发effect执行。

优化建议 #

1. 简化依赖数组：你的useEffect依赖里同时包含了fetchOrders和它的依赖项（range、pagination.page等），其实可以只保留fetchOrders，因为useCallback的依赖已经包含了这些值，避免重复声明带来的冗余：

   useEffect(() => {
     fetchOrders();
   }, [fetchOrders]);
   

2. 避免不必要的useCallback重新创建：如果pagination的修改只依赖于之前的状态（比如更新total），可以把pagination拆分成独立的状态（page、limit、total等），这样依赖项会更精准，减少不必要的函数重新创建：

   // 拆分pagination状态
   const [page, setPage] = useState(1);
   const [limit, setLimit] = useState(10);
   const [total, setTotal] = useState(0);
   const [totalPages, setTotalPages] = useState(1);
   
   const fetchOrders = useCallback(async () => {
     const params = {
       page,
       limit,
       from: range.from,
       to: range.to,
     };
     // ... 后续逻辑不变
   }, [id, range, page, limit]);
   

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