React setInterval function keeps running in the background after rerender - javascript

I am using setInterval inside useEffect with an empty dependency array inside one of my react components.
There is true/false useState which controls the display of that component.
When the state is false, the component is hidden and when it's true the component is shown.
Something like this:
const [state, setState] = useState(false)
// in jsx render section
return (
<div>
{state? <component/> : '' }
</div>
)
When the component loads for the first time the setInterval runs only one time which is what it supposes to do.
If the state goes to false then back to true, the component is removed from the UI and is then displayed back again. However, what happens here is now I have two setInterval functions running in the background, and the first one doesn't shutdown.
The number of the setInterval functions keeps increasing with each time that component re-render.
I don't understand how React works in this situation.
I need to know how it works (i.e. why won't the function shutdown, why are the number of functions increasing) and how to fix it.

This is the structure of React useEffect.React performs the cleanup when the component unmounts.
useEffect(() => {
//effect
return () => {
//cleanup runs on unmount
}
}, [])
The cleanup function should have clearInterval() which will basically removes setInterval or stops it when component unmounts. See the practical code below:
let intervalid;
useEffect(
() => {
intervalid = setInterval(() => {console.log("Iterate");}, 1000));
return function cleanup() {
console.log("cleaning up");
clearInterval(intervalid);
};
},
[]
);
This above code is just for understanding approach. Every effect may return a function that cleans up after it. This lets us keep the logic for adding and removing subscriptions close to each other. # FROM REACT DOCS Reference

Related

Why do you need to use clearInterval to reset the timer in React?

In the following code:
useEffect(() => {
const interval = setInterval(() => {
setSeconds(seconds => seconds + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
Why do you need to return a cleanup function that resets the interval object? In my understanding, since the interval function object was not created with useCallback(), the function should be re-initialized with each render and therefore have no memory of past interval values. Why is a cleanup function needed to clear it before the next render?
Why is a cleanup function needed to clear it before the next render?
(emphasis mine)
It's not and it's not what this code does.
By passing an empty dependency list to useEffect ([]) you are effectively telling React to only run this hook the first time the component renders, not(!) every time the component re-renders.
Now, clearing the interval when the component gets unmounted/destroyed (which is what this code does) is necessary, otherwise the interval would keep running (and throw an error eventually since you cannot update the state of an unmounted component).

I wonder about differences between using `useEffect()` with empty dependency array and not using `useEffect()` itself

I know useEffect() with no array run the callback only at the first render.
Then what is the differences between useEffect(()=>{},[]) and no useEffect().
I mean between this:
function myComponent() {
// some states, variables
useEffect(() => {
// do something on mount <= this is my current concern.
}, [/* empty */]);
// return Element ...
}
and this:
function myComponent() {
// some states, variables
// do something on mount <= this is my current concern.
// return Element ...
}
In React, a component re-renders whenever there is a change in it's state or one of it's props.
The reason it behaves like this is so that it would be possible to "react" to a change in the mentioned data, and to reflect UI changes accordingly.
Every time the component re-renders, so does any logic within it that is not cached (functions, variables, etc..)
useEffect helps us with reacting to a change in the state or props that are stated in it's dependency array.
It gives us to option to automatically run a callback function in such an event/s.
useEffect with an empty dependency array, will run only a single time when the component is mounted.
So in this example -
function myComponent() {
// some states, variables
useEffect(() => {
// do something on mount <= this is my current concern.
}, [/* empty */]);
// return Element ...
}
The callback function inside the useEffect will run only once, when the component is first "brought to life".
Subsequent renders will not invoke this.
While in this example -
function myComponent() {
// some states, variables
// do something on mount <= this is my current concern.
// return Element ...
}
Whatever you put in there will run every time the component re-renders.
Whether this is ok or not depends on your use-case and what function are you trying to run, if it's "cheap" to run or not, etc..
They will be executed every time at component re-render if you put them in function directly
As you mentioned, when you have an empty dependency (like below), the code inside will only run on mount.
useEffect(() => {
something() // only runs on mount
}, []);
If you don't have a useEffect at all, the code will be run every time the component rerenders.
function myComponent() {
// some states, variables
something() // runs on every rerender
// return ...
}
Now the question is, "when does a rerender happen?". In general, anytime a parent component renders, React will rerender all children of that component. So rerenders can occur quite often.
Look at this article, which has some really helpful visual examples of when components rerender.
function myComponent() {
useEffect(() => {
}, []);
}
here useEffect(()=>{},[]) works like componentDidMount
and
function myComponent() {
}
this is normal js function
if the dependency array is empty you will only run the useEffect on mount. While not using useEffect, the code inside your component will run every time you rerender the page/component.
function myComponent(){
console.log('render') // will run everytime you render
return ()
}
function myComponent(){
useEffect(() => {
console.log('on mount'); // run on mount
}, [])
return ()
}

Change text every 3 seconds React useEffect

I'm trying to change my text every 3 seconds using useEffect() and setInterval(). Right now it only changes the text ONE time then it doesn't change it anymore.
What am i doing wrong?
EDIT: I'm using the library "react-spring"
const [toggle, setToggle] = useState(false)
useEffect(() => {
setInterval(() => {
switch (toggle) {
case false: setToggle(true)
break;
case true: setToggle(false)
break;
}
}, 3000);
}, [])
{transitions.map(({ item, props }) => item
? <animated.div style={props}>Text that changes #1</animated.div>
: <animated.div style={props}>Text that changes #2</animated.div>)}
Solution:
useEffect(() => {
const intervalID = setTimeout(() => {
setToggle((toggle) => !toggle)
}, 3000);
return () => clearInterval(intervalID);
}, []);
Important points:
The dependency array([]) should be empty. This way you ensure that you're gonna execute this effect only on the initial mounting of the component. You need only a single interval and its creation and destruction are not dependent on a single variable but the component itself. If you put toggle in the dependency array, you will run this effect every time the variable changes thus effectively making YET ANOTHER interval on every 3 seconds. If you did supply a clean-up function, this would still work but it would be more like a setTimeout. However, in your case(without a clean-up function), this will simply introduce infinite number of intervals which will compete with each other.
You have to supply an updater function to setToggle instead of a simple value. This ensures that you're using the most current state for the update and not the stale one in the closure. If you simply provide a value, the interval is making a closure over your initial value and thus updating it. In this way, you will always update the initial false to true and this will repeat forever, leaving you with a "constant" true value.
As you're using an interval, you should provide a clean-up function to the useEffect to clear the interval on component dismount. This is very important as skipping this part will introduce memory leaks and also bugs as you'll try to update a component even after its dismount from the DOM.
Try this way
useEffect(() => {
setTimeout(() => setToggle((prevToggle) => !prevToggle), 3000);
}, [toggle]);

Too many re-renders. React Limits the number of renders to prevent an infinite loop - React hooks

I'm writing a block of code to sort some data using React hooks. But I get the above mentions warning/error Below is my code.
const [sort, setSort] = useState(sortedInfo)
if (condition){
// some logic
} else if (columns.find((col) => col.hasOwnProperty("actualSort"))){
const {data, asc} = columns.find((col) => col.hasOwnProperty("actualSort").sorting)
setSort(data);
}
My else case gets called many times which is fine as per the condition. Anything that can be done, so that setSort calls are minimized?
Calling setSort() in render triggers too many renders, use useEffect hook to trigger changes when value changes.
useEffect(() => {
if (condition){
// some logic
} else if (columns.find((col) => col.hasOwnProperty("actualSort"))){
const {data, asc} = columns.find((col) => col.hasOwnProperty("actualSort").sorting)
setSort(data);
}
}, [condition]); // Only re-run the effect if condition changes
setState causes component re-render; and the re-render runs setState again - infinite loop;
In Functional components, must use useEffect to fix this problem;
useEffect(() => {
setSort(data)
}, [condition])
setSort() caused the re-render, and then (if the condition is not changed) useEffect() makes sure setSort(data) is not running again.
setSort will call re-render. So, it call If condition. You should use logic of if condition in function call or useEffect.

React hooks useEffect running even with [] given as deps

I am facing quite a weird issue. Below is the code
const Counter = () => {
const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => setCount(count => count + 1), 1000);
return () => {
clearInterval(id);
};
}, []);
return <div>{count}</div>;
};
As per my knowledge, since I have given an empty array, the useEffect will only run after the first render. Also, since I am clearing the interval COUNT MUST NOT BE UPDATED AFTER COUNT=1. Still the setInterval seems to be running continuously. Can anyone please explain it?
Is it so that since I am given [] as deps the interval is somehow not being cleared?
clearInterval(id) - this will get invoked just before component gets unmounted. As long as the component is not unmounted the function returned from useEffect will not invoked. So the interval in not cleared and the state will continue updating thus the count increases. The interval gets cleared when the component Counter gets unmounted
This is why React also cleans up effects from the previous render before running the effects next time.
Yes, React will clean up before running the effects next time, not right after running the current effects.
Here's a brief explanation.
In your case, clearInterval(id) will only be executed when the Counter component is unmounted.
edited:
I have created a sandbox example to show when the effect is executed. Based on this example I updated my original "graph" because it looks react run the "clean effect" after rerendering.
The effect is only setting up the interval callback to update your state. setInterval will continue to run on the interval, use setTimeout instead to only run the state update once. Still return a clearTimeout in case the component unmounts within the timeout period.
Edit: More Detailed Explanation
By using an empty dependency array you are telling react that running your effect isn't dependent on any external values. The effect will run once when the component mounts (setting up the setInterval) and never run again since it isn't dependent on anything. When the component is unmounting react will run all the returned effect "cleanup" functions, i.e. the clearInterval call.
What this leaves you with is this:
Component mounts
Effect runs: sets up interval, returns cleanup function
interval is running
update count after 1000ms
update count after 1000ms
update count after 1000ms
update count after 1000ms
Component unmounts: react runs effect cleanup function, clears interval
Suggested Fix: Use setTimeout to only update state once
const Counter = () => {
const [count, setCount] = useState(0);
useEffect(() => {
const id = setTimeout(() => setCount(count => count + 1), 1000);
return () => {
clearTimeout(id);
};
}, []);
return <div>{count}</div>;
};

Categories