How is this programming nightmare?
Answered
Kryp Arnold posted this in #help-forum
Hello guys i've been searching on reddit casually and i saw this, im not sure if this is programming nightmare.
Answered by Somali
Because setInterval is within the useEffect that runs after every render by default. You’ll end up having multiple intervals running at the same time which could lead to memory leaks or unexpected behavior.
You should add an empty array to the dependency array of your useEffect to make sure it only runs once. Then you should clear the interval whenever the component unmounts.
Here is what it should look like:
import { useEffect, useState } from "react";
function App() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
setSeconds((prev) => prev + 1);
}, 1000);
// Cleanup function to clear the interval when the component is unmounted.
return () => clearInterval(intervalId);
}, []); // Empty dependency array ensures the effect runs only once when the component mounts.
return (
#Unknown Channel
<h1>{seconds} seconds have passed!</h1>
</>
);
}
export default App;
You should add an empty array to the dependency array of your useEffect to make sure it only runs once. Then you should clear the interval whenever the component unmounts.
Here is what it should look like:
import { useEffect, useState } from "react";
function App() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
setSeconds((prev) => prev + 1);
}, 1000);
// Cleanup function to clear the interval when the component is unmounted.
return () => clearInterval(intervalId);
}, []); // Empty dependency array ensures the effect runs only once when the component mounts.
return (
#Unknown Channel
<h1>{seconds} seconds have passed!</h1>
</>
);
}
export default App;
14 Replies
Dunker
why
Somali
Because setInterval is within the useEffect that runs after every render by default. You’ll end up having multiple intervals running at the same time which could lead to memory leaks or unexpected behavior.
You should add an empty array to the dependency array of your useEffect to make sure it only runs once. Then you should clear the interval whenever the component unmounts.
Here is what it should look like:
import { useEffect, useState } from "react";
function App() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
setSeconds((prev) => prev + 1);
}, 1000);
// Cleanup function to clear the interval when the component is unmounted.
return () => clearInterval(intervalId);
}, []); // Empty dependency array ensures the effect runs only once when the component mounts.
return (
#Unknown Channel
<h1>{seconds} seconds have passed!</h1>
</>
);
}
export default App;
You should add an empty array to the dependency array of your useEffect to make sure it only runs once. Then you should clear the interval whenever the component unmounts.
Here is what it should look like:
import { useEffect, useState } from "react";
function App() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
setSeconds((prev) => prev + 1);
}, 1000);
// Cleanup function to clear the interval when the component is unmounted.
return () => clearInterval(intervalId);
}, []); // Empty dependency array ensures the effect runs only once when the component mounts.
return (
#Unknown Channel
<h1>{seconds} seconds have passed!</h1>
</>
);
}
export default App;
Answer
Shy Albatross
I'm pretty sure it should not look like this, though
Dunker
that [] is million dollar mistake tho 😂
Somali
Would love to be enlightened
Dunker
when you forget put it, your cloud bills are being enormous in short time
you are DoS ing your services 😂
Somali
How would you have implemented this timer? I’ve built 10+ applications with a [] and have never had an issue with my cloud bills tbh. I’m sure it could be a costly mistake but I’m wondering how and whether it’s true in every case
Dunker
just try to remove that [] from your useEffects
and imagine your endpoint hit for 1k times in 1h
Somali
Already have.. hasn’t happened
Maybe it’s just luck
got it, thanks!