Reputation: 1987
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
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