Next.js Discord

Discord Forum

useContext({ variable, function })'s initital values never change

Answered
Vespid wasp posted this in #help-forum
Open in Discord
Vespid waspOP
"use client";
import React, { createContext, useState } from "react";
const CounterContext = createContext({
  state: { count: 1 },
  setState: (v) => {
    console.log("initial");
  },
});
const CounterContextProvider = ({ children }) => {
  const [state, setState] = useState({ count: 1 });
  return (
    <CounterContext.Provider value={{ state, setState }}>
      {children}
    </CounterContext.Provider>
  );
};
export { CounterContext, CounterContextProvider };

although i did pass new values by value={{ state, setState }},
it always calls the initial setState
setState: (v) => {
  console.log("initial");
},
Answered by Vespid wasp
I realized i put theNavBar outside CounterContextProvider , now its good
<div className="flex basis-[10%] shrink-0">
          <NavBar />
        </div>
        <div className=" basis-[90%] shrink-0">
          <CounterContextProvider>{children}</CounterContextProvider>
        </div>
View full answer

1 Reply

Vespid waspOP
I realized i put theNavBar outside CounterContextProvider , now its good
<div className="flex basis-[10%] shrink-0">
          <NavBar />
        </div>
        <div className=" basis-[90%] shrink-0">
          <CounterContextProvider>{children}</CounterContextProvider>
        </div>
Answer