当消费者调用时，作为上下文值传递的函数无法访问更新的组件状态

Question

I am passing a function to as value to the Context Provider and on calling that function from the consumer, I'm getting the older state.

Provider.jsx

const MyContext = createContext();

const Provider=()=>{
  const [someState, setSomeState] = useState();

  const providerFunction=()=>{
    // accessing someState
  }

<MyContext.Provider value={{providerFunction}}>
  <ConsumerComponent/>
</MyContext.Provider>

Comsumer.jsx

const {providerFunction} = useContext(MyContext);

On calling providerFunction from Consumer.jsx , providerFunction in Provider.jsx is called but someState is not getting the updated value, it is printing the initial value assigned to it.

I'm unable to figure out the reason for this. Any help is appreciated.

Answer 1

I figured out the issue, actually, I was using debounce in Consumer and in useCallback , I missed passing providerFunction as a dependency.

After adding the dependency, it worked!