Unable to change value of component programmatically using useState - reactjs

Question

I am trying to change the state programmatically while using the useState hook.
I defined it this way:
const [data, setData] = React.useState({
text: "Hello StackOverflow!",
someNumber: 2
});
For testing purposes, I created an interval which increases someNumber every second.
setInterval(() => {
setData({ ...data, someNumber: data.someNumber + 1 });
}, 1000);
When I now mount the component, the text starts flashing very fast with different numbers. I guess the Interval is started multiple times but I don't know why. It's my first project using the new hooks.
A full example of my code can be found on code sandbox snippet
And in case the link goes down, here's the component:
import React from "react";
import TextField from "#material-ui/core/TextField";
export default function StateTextFields() {
const [data, setData] = React.useState({
text: "Hello StackOverflow!",
someNumber: 2
});
setTimeout(() => {
setData({ ...data, text: "How are you?" });
}, 1000);
setInterval(() => {
setData({ ...data, someNumber: data.someNumber + 1 });
}, 1000);
return (
<TextField
id="standard-name"
label="Name"
value={data.text + " " + data.someNumber}
margin="normal"
/>
);
}

Answer 1

Move your setInterval inside a useEffect. This will stop it from creating a new interval every render.
React.useEffect(() => {
setInterval(() => {
setData(prevState => ({ ...prevState, someNumber: prevState.someNumber + 1 }));
}, 1000);
setTimeout(...)
},[])
This will make it so that these functions only run one time when the component mounts.
Unconditionally calling a function that modifies state inside a functional component is like doing the same in the render of a class component. It will modify state, which causes a re-render, which will modify state, and so on infinitely.
You need to use the prevState callback to update. This is because useEffect is not listening to changes made to data like useEffect(() => {}, [data]) making data go stale. But we also don't want to change it to listen to changes, because that would cause your interval to be created infinitely again. So we use prevState which always uses the most recent copy of state.

Answer 2

You are setting setTimeout and setInterval on each component render call.

Answer 3

Your Timeouts/Intervals will get fired on every re-render. You have to put it in a useEffect which replaced lifecycle hooks like componentDidMount().
Example:
useEffect(()=>{
const myInterval = setInterval(() => {
setData({ ...data, someNumber: data.someNumber + 1 })
}, 1000);
return ()=>{myInterval.clearInterval()} //cleanup
}, []) //The empty array means "only do this once, after the first render"

Answer 4

There are multiple problems here.
You are setting multiple timeouts/intervals that deal with the same data. They are updating the same values over different periods of time because of the asynchronicity. For example: The timeout changes data at almost the same time as the interval. Which results in the timeout calculating 2 + 1, meanwhile the interval thinks data.someNumber is still 2 instead of 3.
When not using hooks like React.useEffect react will recreate the methods each time it rerenders the component, a.k.a. every time state changes, a.k.a. every time data changes.
As BrianThompson pointed out the following solution fixes these problems. I added some comments to explain why.
React.useEffect(() => {
setInterval(() => {
// using prevState is essential here because it negates the need for 'data' as
// that would force you to recreate the hook every time 'data' changes
setData(prevState => ({ ...prevState, someNumber: prevState.someNumber + 1 }));
}, 1000);
setTimeout(...)
},[])