How to fix "The object passed as the value prop to the Context provider changes every render" consider using useMemo error?

Question

I am new to react hooks and next js. I am getting this error. I don't know how to use useMemo in this scenario. Can someone help me with this? Here is my code -

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();

    return (
        <ContextProvider>
            <ModeContext.Provider
                **value={{ kycState, setkycState, kybState, setkybState }}**
            >
                <ThemeProvider defaultTheme="dark">
                    <Component {...pageProps} />
                </ThemeProvider>
            </ModeContext.Provider>
        </ContextProvider>
    );
};

export default MyApp;

Answer 1

Two objects are never equal to each other in javaScript unless they point to the same address.

const a = {  a : 1 };
const b = {  b : 2 };

const obj1 = { a , b };
const obj2 = { a , b };
console.log(obj1 === obj2);

{{ kycState, setkycState, kybState, setkybState }} will be a new object every time.

You can memoize the value:

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

    const obj = useMemo(() => ({
       kycState,kybState,setkybState,setkycState
   }),[kycState,kybState,setkybState,setkycState]);

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

Now the object is created anew only when the dependencies change.