Twinfriends
Twinfriends

Reputation: 1987

React hook doesn't rerender on state update

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++;
        });
    }, []);

Upvotes: 0

Views: 475

Answers (1)

Shubham Verma
Shubham Verma

Reputation: 5054

You have to add data in useEffect i.e

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.

Upvotes: 2

Related Questions