使 state 与快速发生的事件保持同步

Question

I made a custom hooks keep track of a state variable that is based on the amount of socket events received. When I test by sending 10 simultaneous events the result of the state variable total is 6 or 7 or 8 not the expected 10.

const useSocketAmountReceivedState = (event: string): number => {
    const [total, setTotal] = useState(0);

    useEffect(() => {
        Socket.on(event, () => {
            console.log(total);
            setTotal(total + 1);
        });

        return (): void => {
            Socket.off(event);
        };
    });

    return total;
}

The logs of run look something like

0
1
1
2
3
3
4
4
4
5

Socket in the example above is implementation around websocket.

So I can deduct that total is not updated fast enough, but what is the best pattern to handle this sort of behaviour?

Answer 1

Try putting an empty array as the second argument in the hook. You don't want this to register an event each time the component renders.

const useSocketAmountReceivedState = (event: string): number => {
    const [total, setTotal] = useState(0);

    useEffect(() => {
        Socket.on(event, () => {
            console.log(total);
            setTotal(total + 1);
        });

        return (): void => {
            Socket.off(event);
        };
    }, [total]);

    return total;
}

UPDATE:

I made an update to my initial answer, and added Total into the dependency array of the React Hook.

Note that the second argument, aka dependency array. It is an array that accepts state or prop. And it instructs React to run this hook each time any of the elements in the dependency array changes.

If you pass an empty array, then the hook will only be run at initial load, after the component mounts.

In your example, if you pass an empty array, it creates a closure. Hence, the total value will always be the initial value.

So you can pass Total into the dependency array, which will invoke the useEffect() to run only when Total value changes. In your example, where there is no dependency array passed to the second argument, the useEffect() will run every single time, which is not what we want.

Answer 2

Socket.on event has to be outside the useEffect function

const useSocketAmountReceivedState = (event: string): number => {
    const [total, setTotal] = useState(0);
    Socket.on(event, () => {
        console.log(total);
        setTotal(total + 1);
    });
    useEffect(() => {
        return (): void => {
            Socket.off(event);
        };
    }, []);

    return total;
}

Answer 3

A colleague came with this solution. Using a reference for which as it is a reference is not enclosed.

const useSocketAmountReceivedState = (event: string): number => {
    const count = useRef(0);
    const [state, setState] = useState(0);

    useEffect(() => {
        Socket.on(event, () => {
            count.current++;
            setState(count.current);
        });

        return (): void => {
            Socket.off(event);
        };
    }, []);

    return state;
}