React中Context Provider value数组每次渲染变化报错修复方案

react/jsx-no-constructed-context-values规则触发逻辑为：检测到Context Provider的value属性传入了每次渲染都会重新创建的引用类型值。
原代码中直接在行内写数组字面量[context, setContext]，每次ModalProvider组件重渲染都会生成全新的数组实例，即使context状态值、setContext更新方法本身没有变化，数组引用地址也会改变，最终导致所有消费该Context的组件发生不必要的重渲染，产生额外性能损耗。

使用useMemo对传递的value值做缓存，只有当依赖项发生变化时，才会重新生成新的value引用，具体代码如下：

import { useState, useMemo, createContext } from 'react';

// 原有Context定义，保持已有实现即可
const MyContext = createContext();

function ModalProvider({ children }) {
  const [context, setContext] = useState(false);
  // 缓存Context传递的值，依赖为状态值和状态更新方法
  const contextValue = useMemo(() => [context, setContext], [context, setContext]);

  return (
    <MyContext.Provider value={contextValue}>
      {children}
    </MyContext.Provider>
  );
}

• React 官方保证useState返回的状态更新方法（即示例中的setContext）在组件全生命周期内引用稳定，不会随重渲染变化，因此useMemo的依赖数组简写为[context]也完全符合Hooks规则，不会触发依赖缺失警告。
• 修复后只有当context的实际值发生变更时，才会生成新的value引用触发消费组件更新，既解决ESLint报错，也避免了无效重渲染的性能问题。

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