React Context中setPairings为何在自定义Hook中间歇性变为undefined？

场景复现 #

现有以下React上下文Provider组件和自定义Hook：

Provider组件代码

const ConnectionProvider = ({ children }) => {
  const [pairings, setPairings] = useState([]);

  const value = { pairings, setPairings };

  console.log('Provider render', setPairings);

  return <ConnectionContext.Provider value={value}>{children}</ConnectionContext.Provider>;
};

自定义Hook代码

export const usePairings = () => {
  const { pairings, setPairings } = useContext(ConnectionContext);
  console.log('Hook render', setPairings);

  const removePairing = useCallback((id) => {
    setPairings((prevPairings) => prevPairings.filter((pairing) => pairing.id !== id));
  }, [setPairings]);

  const addPairing = useCallback((pairing) => {
    setPairings((prevPairings) => [...prevPairings, pairing]);
  }, [setPairings]);

  return { pairings, addPairing, removePairing };
};

运行后控制台输出如下：

Provider render BoundFunctionObject { … }
Hook render BoundFunctionObject { … }
Hook render BoundFunctionObject { … }
Hook render undefined
Provider render BoundFunctionObject { … }
Hook render BoundFunctionObject { … }
Hook render BoundFunctionObject { … }
Hook render undefined
Provider render BoundFunctionObject { … }

可见自定义Hook中的setPairings会间歇性变为undefined，且后续触发Provider重渲染，与预期的“Provider重渲染触发Hook重渲染”逻辑相反。

原因分析 #

1. 上下文值引用不稳定
   Provider每次渲染时都会创建全新的{ pairings, setPairings }对象作为上下文值。即使pairings未发生变化、setPairings是useState返回的稳定函数，这个新对象的引用变化也会触发所有上下文消费者的重渲染。

2. 渲染过程中的中间状态读取
   在React的渲染更新流程中，当Provider因上下文值引用变化开始重渲染时，部分消费Hook可能在上下文更新完成前读取到中间状态，导致setPairings为undefined。这种情况多发生在批量更新或组件树嵌套较深的场景下，上下文更新的传播存在微小延迟。

3. 因果关系的误解
   你观察到的“Hook重渲染后Provider重渲染”是因果倒置：实际逻辑是Provider先因上下文值引用变化触发重渲染，进而导致Hook重渲染；而setPairings为undefined的Hook渲染，是Provider重渲染过程中上下文未完成更新的临时快照，待Provider更新完成后，上下文值恢复正常，再次触发Hook重渲染。

解决方案 #

最直接的修复方式是用useMemo缓存上下文值，确保只有当pairings变化时才更新上下文引用：

const ConnectionProvider = ({ children }) => {
  const [pairings, setPairings] = useState([]);

  // 用useMemo缓存上下文对象，依赖仅为pairings
  const value = useMemo(() => ({ pairings, setPairings }), [pairings]);

  console.log('Provider render', setPairings);

  return <ConnectionContext.Provider value={value}>{children}</ConnectionContext.Provider>;
};

这样Provider只会在pairings实际变化时重渲染，上下文值的引用保持稳定，既避免了不必要的Hook重渲染，也消除了setPairings为undefined的异常。

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