在自定义Hook中操作React上下文是否违反Hook规则？

用户实现了一个React自定义Context Provider，希望在调用自定义Hook时设置CRUD操作的基础ID，代码如下：

import React, { Dispatch, PropsWithChildren, SetStateAction, createContext, useContext } from "react";

export type RepositoryContext = {
  dispatchDelete: (id: number) => Promise<void>;
  dispatchEdit: (body: SelfCollection, action: EditionAction) => Promise<void>;
  dispatchCreate: (body: ScoPostBody) => Promise<void>;
  loadList: () => Promise<void>;
  loading: boolean;
  data: RepoEntities[];
  setFetchingId: Dispatch<SetStateAction<number | undefined>>;
};

const RepositoryContext = createContext<RepositoryContext | null>(null);

export const useRepository = (id?: number) => {
  const context = useContext(ScoRepositoryContext); // 此处存疑
  if (id) context?.setFetchingId(id);
  return context;
};

export const RepositoryProvider = ({ children }: PropsWithChildren) => {
  // 上下文逻辑代码...

  const contextContent = {
    dispatchDelete,
    dispatchEdit,
    dispatchCreate,
    loadList,
    loading,
    data,
    setFetchingId,
  };

  return <ScoRepositoryContext.Provider value={contextContent}>{children}</ScoRepositoryContext.Provider>
}

使用方式：

<RepositoryProvider>
  <ConsumerComponent />
</RepositoryProvider>

用户已知直接返回上下文的Hook写法是合法的：

export const useRepository = () => useContext(ScoRepositoryContext);

疑问：在自定义Hook中获取上下文后执行状态更新操作再返回，是否属于合法的React代码？是否违反Hook规则？

补充：应用存在其他违反Hook规则的错误（提示在useEffect/useCallback等内部调用Hook），但该错误与当前写法无关，此问题为理论探讨。

是否违反Hook规则？ #

这种写法没有违反React Hook的核心规则：

• 自定义Hook useRepository 内部的 useContext 是在Hook的顶层调用的，没有嵌套在条件、循环或嵌套函数中，符合「只在顶层调用Hook」的规则；
• 该Hook是在React函数组件或其他自定义Hook中被调用的，符合Hook的使用场景要求。

所以从Hook规则的角度，这个写法是合法的。

存在的潜在问题 #

虽然不违反规则，但这种写法有明显的潜在问题：

• 每次调用useRepository(id)的组件渲染时，只要id存在，就会直接调用setFetchingId(id)，触发上下文的状态更新。如果组件的渲染依赖于上下文的状态（比如data或loading），这会导致无限重渲染循环：状态更新触发组件渲染，渲染时又调用setFetchingId，再次触发状态更新，循环往复。
• 即使没有循环，也会导致不必要的状态更新和渲染，影响性能。

优化方案 #

应该用useEffect包裹状态更新逻辑，仅在id发生变化时执行：

export const useRepository = (id?: number) => {
  const context = useContext(ScoRepositoryContext);
  
  useEffect(() => {
    if (id && context) {
      context.setFetchingId(id);
    }
  }, [id, context]); // 依赖id和context，仅当两者变化时执行

  return context;
};

这样可以避免每次渲染都触发状态更新，同时保证id变化时能正确更新上下文的fetchingId。

内容的提问来源于stack exchange，提问作者César Rodriguez