How do I access the Context and Component state from within a DOM callback in a function React component?

Question

I cant seem to access Context state or component state from inside a DOM callback in a functional React component. I discovered the problem trying dispatch a state update in response to a document keypress.

Minimal Code sandbox demonstrating the problem here. Its a very basic reducer/context context.Provider object wrapping a child/useContext component to access context state.

The child implements a timer and a keypress callback. It also increments a local counter set with setState().

To test open the console and see the timer incrementing both the context and local component counter. Press any key to observe the callback referencing the initial state passed to the context.Provider component and the initial value for setState();

State updates arent accessible from within the DOM component.

Im always grateful for any advice given.Thanks

Answer 1

Using refs works just as well for context state as it does for component state. A small feedback loop to reassign ref.current with each update of component state results in the desired effect.

See here

Heres the mod... I pulled out the timer from the initial example to simplify code.

  useEffect(() => {
    console.log("context state", JSON.stringify(context.state, null, 2));
    stateRef.current = context.state;
  }, [context.state]);

  useEffect(() => {
    document.onkeypress = function (e) {
      console.log(
        "actual value:", context.state,
        "ref value:", stateRef.current);
      context.dispatch({ type: "KEYPRESS", payload: e.key });
    };
  }, []);