如何修复Context Provider的value每次渲染都变化的useMemo提示错误？

错误提示「The object passed as the value prop to the Context provider changes every render」的原因是：每次MyApp组件渲染时，都会生成一个全新的对象作为ModeContext.Provider的value，React会判定这个值每次都不同，触发所有订阅该Context的组件无意义重渲染。

用useMemo缓存这个对象就能解决问题，具体修改如下：

修改后的完整代码 #

import { useEffect, useState, useMemo } from "react";
import { useRouter } from "next/router";
import { ThemeProvider } from "next-themes";
import { ContextProvider } from "src/context/context";
import { ModeContext } from "src/context/ModeContext";

const MyApp = ({ Component, pageProps }) => {
    const [kycState, setkycState] = useState("unverified");
    const [kybState, setkybState] = useState("unverified");
    const router = useRouter();

    // 用useMemo缓存Context值，仅当依赖项变化时重新生成对象
    const contextValue = useMemo(() => ({
        kycState,
        setkycState,
        kybState,
        setkybState
    }), [kycState, kybState]);

    return (
        <ContextProvider>
            <ModeContext.Provider value={contextValue}>
                <ThemeProvider defaultTheme="dark">
                    <Component {...pageProps} />
                </ThemeProvider>
            </ModeContext.Provider>
        </ContextProvider>
    );
};

export default MyApp;

关键说明 #

• useMemo的依赖数组只放kycState和kybState：React保证setState函数（如setkycState）在组件生命周期内引用稳定，不需要加入依赖项。
• 只有当kycState或kybState变化时，contextValue才会重新创建，避免了不必要的组件重渲染，同时消除错误提示。

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