React Context Provider打开文件选择器时重复执行问题求助

你的ModalProvider在打开文件选择器时重复执行console.log，核心原因是组件发生了不必要的重渲染，可能是父组件重渲染传递下来，或者Provider的value每次渲染都生成新对象触发的连锁反应。以下是具体修复方案：

修复后的代码 #

"use client";
import { createContext, useState, useMemo, memo } from "react";

export const modalContext = createContext({ isVisible: false, setVisible: null });

export const ModalProvider = memo(({ children }) => {
  const [isVisible, setVisible] = useState(false);

  console.log("Called from provider");

  // 缓存上下文值，仅当isVisible变化时更新
  const contextValue = useMemo(() => ({
    isVisible,
    setVisible
  }), [isVisible]);

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

关键优化点 #

• 用memo包裹组件：memo会让ModalProvider仅在children属性发生变化时才重渲染，避免父组件其他状态更新导致的无意义重渲染。
• 用useMemo缓存上下文值：确保只有当isVisible状态变化时，才生成新的value对象，防止因对象引用变化触发上下文订阅组件的不必要重渲染，同时也间接稳定了Provider的渲染逻辑。
• 给useState设置初始值：将初始状态明确设为false，避免undefined带来的潜在状态异常。

如果打开文件选择器时仍有重渲染，需要检查上层组件是否有相关状态更新导致父组件重渲染，此时memo已经能隔离大部分非必要的渲染传递。

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