Function passed as context value can't access updated component state when called by a consumer

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!