CODEWITHSUNDEEP
reactjsstatereact-hooks
Itay
Itay

Reputation: 337

React hooks state is not the latest when is used from a non-react callback

When I attempt to reach to the state during websocket callback I am not recieving the latest version of it:

import update from 'immutability-helper';
import React, {useCallback, useEffect, useState} from 'react';

const [pendingResponse, setPendingResponse] = useState([]);

const addPendingResponse = (sequence, callback) => {
    setPendingResponse(prevPendingResponse => {
        return update(prevPendingResponse, {$push:[{sequence: callback}]});
    });
};


const wsOnMessage = useCallback((event) => {
    const message = event.data;
    if (message.payload.response_to in pendingResponse) {
        // NOT GETTING THE LATEST pendingRespone STATE !
        pendingResponse[message.payload.response_to]();
    }
}, [pendingResponse]);

useEffect(() => {
    console.log('useEffect');
    console.log('setting web socket...');
    const ws = new WebSocket('ws://127.0.0.1:8000/chat');

    ws.onmessage = wsOnMessage;

}, []);

Any way to enforce getting latest state like there is when updating it (using function instead of direct assignment)?

Upvotes: 0

Views: 190

Answers (1)

Aleksandre Javakhishvili
Aleksandre Javakhishvili

Reputation: 436

When useCallBack's deps is changed, new function is returned with new reference so you have to update onmessage function with new one.

Try following code:

import update from 'immutability-helper';
import React, { useCallback, useEffect, useState, useRef } from 'react';

const [pendingResponse, setPendingResponse] = useState([]);
const webSocket = useRef(new WebSocket('ws://127.0.0.1:8000/chat'));

const addPendingResponse = (sequence, callback) => {
  setPendingResponse(prevPendingResponse => {
    return update(prevPendingResponse, { $push: [{ sequence: callback }] });
  });
};


const wsOnMessage = useCallback((event) => {
  const message = event.data;
  if (message.payload.response_to in pendingResponse) {
    // NOT GETTING THE LATEST pendingRespone STATE !
    pendingResponse[message.payload.response_to]();
  }
}, [pendingResponse]);

useEffect(() => {
  if (webSocket && webSocket.current) {
    webSocket.current.onmessage = wsOnMessage;
  }
}, [wsOnMessage]);

Upvotes: 2

Related Questions