访问记忆函数中更新的上下文

Question

I created a component (for websocket communication, as a react context) that needs to access to my AppContext component.

The WebSocketContext component makes use of useCallback and useMemo , so that the websocket connection is not alway re-created on every re-render of AppContext.

What I cannot figure out is why I cannot access to the current value of appContext when .onmessage executes. Basically, what I get is the initial value of appContext.

What can I do to get the current value ?

App.js

<AppContext>
  <WebSocketProvider>
    ...

WebSocketContext.js

import React, { useEffect, useContext, useCallback, useMemo, useState }  from 'react';
import { w3cwebsocket as W3CWebSocket } from "websocket";
import { AppContext } from "./AppContext.js";

export const WebSocketContext = React.createContext(null);

const WebSocketProvider = ({ children }) => {

  const [appContext, setAppContext] = useContext(AppContext);  
  const [wsClient, setWsClient] = useState(null);

  const sendMessage = useCallback((message) => {
    wsClient.send(message);
  });

  const connect = useCallback(() => {

    console.log(Date.now(), appContext.activeZone); //access to current value of appContext is OK

    let tmpWsClient = new W3CWebSocket("wss://127.0.0.1:5000");

    tmpWsClient.onmessage = (message) => {   
      const msgObj = JSON.parse(message.data);      
      console.log("[Message received!]", Date.now(), appContext.activeZone); //not the current value of appContext! (actually, the initial value)
    };    
    tmpWsClient.onopen = (event) => { ... };
    tmpWsClient.onclose = (event) => { ... };
    tmpWsClient.onerror = (err) => { ... };

    return tmpWsClient;
  });

  //at 1st render of the component, create websocket client
  useEffect(() => {
    if (!wsClient) {
      const tmpWsClient = connect();
      //set websocket context
      setWsClient(tmpWsClient);
    }
  }, []);

  //this triggers as expected
  useEffect(() => {
    console.log("activeZone change detected:", appContext.activeZone);//access to current value of appContext is OK
  }, [appContext.activeZone]);

  const contextValue = useMemo(
    () => ({
    client: wsClient, 
    sendMessage
  }), [wsClient, sendMessage]);

  return (
    <WebSocketContext.Provider value={contextValue}>
        {children}
    </WebSocketContext.Provider>
  );
};

const context = ({children}) => WebSocketProvider({children}); 
export default context;

Answer 1

What you have to do in connect is to set in you useCallBack the data needed to update the memorized function whenever is needed

const connect = useCallback(() => {

    console.log(Date.now(), appContext.activeZone); 
    let tmpWsClient = new W3CWebSocket("wss://127.0.0.1:5000");

    tmpWsClient.onmessage = (message) => {   
      const msgObj = JSON.parse(message.data);      
      console.log("[Message received!]", Date.now(), appContext.activeZone); 
(actually, the initial value)
    };    
    tmpWsClient.onopen = (event) => { ... };
    tmpWsClient.onclose = (event) => { ... };
    tmpWsClient.onerror = (err) => { ... };

    return tmpWsClient;
  },[appContext]);