React挂钩不会在状态更新时重新呈现

Question

I'm trying to implement a websocket for the first time and I try to create a graph that streams my CPU usage. Pretty simple. Websocket works, dataArray looks like it want it to be... But somehow the setData() hook doesn't trigger a rerender of my component.

I've a console.log in the return method of my component, somehow it only gets triggered once. Can someone explain me why?

const [data, setData] = useState([['x', 'x']);

useEffect(() => {
    const socket = socketIOClient(endpoint);
    var counter = 1;
    socket.on("AnswerFromApi", result => {
        setNewState(result, counter);
        counter++;
    });
}, []);

const setNewState = (arr, counter) => {
    var dataArray = data;
    dataArray.push([arr, counter]);
    if(dataArray.length > 5) {
        dataArray.splice(1, 1);
    }
    console.log(dataArray);
    setData(dataArray);
};

Expected output (also console.log(dataArray) seems to be correct):

0: (2) ["x", "x"]
1: (2) [6.23, 35]
2: (2) [14.57, 36]
3: (2) [15.42, 37]
4: (2) [8.15, 38]

Thanks for every help!

EDIT: Found the answer. Correct code:

useEffect(() => {
        const socket = socketIOClient(endpoint);
        var counter = 1;
        socket.on("AnswerFromApi", result => {
            setData(prevState => {
                if(prevState.length > 10) {
                    prevState.splice(1, 1);
                }
                return ([...prevState, [counter, result]])
            });
            counter++;
        });
    }, []);

Answer 1

You have to add data in useEffect ie

useEffect(() => {
    const socket = socketIOClient(endpoint);
    var counter = 1;
    socket.on("AnswerFromApi", result => {
        setNewState(result, counter);
        counter++;
    });
}, [data]);

If we pass empty array it will work as componentDidMount and if we pass value it will work as componentDidUpdate whenever that value changed.