Можно например так:
import React from "react";
const Timer = () => {
const [number, setNumber] = React.useState(1);
React.useEffect(() => {
// таймер пересоздаётся каждый раз когда обновляется number
const id = setInterval(() => setNumber(number + 1), 1000);
return () => {
clearInterval(id);
};
}, [number]);
return <div>Number is {number}</div>;
};
export default Timer;
Но даже проще можно написать так:
import React from "react";
const Timer = () => {
const [number, setNumber] = React.useState(1);
React.useEffect(() => {
setTimeout(() => setNumber(number + 1), 1000);
}, [number]);
return <div>Number is {number}</div>;
};
export default Timer;
Потому что в первом варианте из-за особенностей реакта каждый раз пересоздаётся таймер. С одним таймером не будет ре-рендерится обновлённое значение (если оно должно быть не только в консоли):
import React from "react";
const Timer = () => {
const [number, setNumber] = React.useState(1);
let n = 0;
React.useEffect(() => {
// таймер создаётся 1 раз
const id = setInterval(() => {
console.log(n++);
}, 1000);
return () => {
clearInterval(id);
};
}, []);
return (
<>
<div>Number is {number}</div>
<div>n is {n}</div>
</>
);
};
export default Timer;
Последний вариант - это не Реакт стиль -> bad practice