We Keep Coding

setInterval does not take the state of the hook

I call an api every x time with setInterval I must pass some parameters to the api to get the data, my parameters are state hooks, the problem is that when I update a state hook for example "ChoiceIpGroup" the setinterval always takes the initial value and not the update of the state of the hook. What could be happening ?
useEffect(() => {
let interval = setInterval(() => {
//getKPIMetricas(setdata, dataFilter)
getMetricsInGroups(dataFilter, setDataKPisGroups, choiceIpGroup)
}, 4000);
return () => clearInterval(interval);
}, []);
I update the hook states from the front, when I change the hook state it works, but when the setinterval is updated the hook state is updated to the initial parameter. what is an empty array
const [choiceIpGroup, setChoiceIpGroup] = useState([])
and when updating the hook it would look like this:
const [choiceIpGroup, setChoiceIpGroup] = useState([ "0", "1" ])
but when setinterval() acts it doesn't take the update of the hook's state, only the initial state.

setInterval is a method that calls a function or runs some code after specific intervals of time, as specified through the second parameter. For example, the code below schedules an interval to print the phrase: “Interval triggered” every second to the console until it is cleared. setInterval(() => { console.

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).

React setInterval function keeps running in the background after rerender

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

Why does listing a variable as a dependency "solve" the stale closure problem?

I'm trying to understand the general advice I've seen regarding React and stale closures.
Specifically, as I understand it, the term "stale closure" is used to describe a scenario where a component and useEffect function are constructed like this
function WatchCount() {
const [count, setCount] = useState(0);
useEffect(function() {
setInterval(function log() {
console.log(`Count is: ${count}`);
}, 2000);
}, []);
return (
<div>
{count}
<button onClick={() => setCount(count + 1) }>
Increase
</button>
</div>
);
}
React calls WatchCount to render a component, and sets the value of the count variable. When javascript calls the log function two seconds later, the count variable will be bound to the count variable from when WatchCount was first called. The value of count won't reflect updates that may have happened on renders of WatchCount that happened in-between the first render and the interval code eventually firing.
The general advice that's given to "solve" this is to list your variable in the dependencies array -- the second argument to useEffect
useEffect(function iWillBeStale() {
setInterval(function log() {
console.log(`Count is: ${count}`);
}, 2000);
}, [count]);
As a javascript programmer, I don't understand how this "solves" the problem. All we've done here is create an array that includes the variable in it, and passed that array to useEffect My naive view is that the count variable in log is still scoped to the first call of WatchCount, and should still be stale.
Am I missing some nuance of javascript's scope here?
Or does this "fix" things because of something that useEffect is doing with those variables?
Or some third thing?

Am I missing some nuance of javascript's scope here?
No, you're right, creating the array and passing it to useEffect doesn't affect the closure, the closed-over constant keeps its value.
Or does this "fix" things because of something that useEffect is doing with those variables?
Yes. React runs the entire render function each time the state changes, which creates a new closure and passes it to useEffect again. When the dependencies change, useEffect re-runs the effect function which creates a new interval with the new closure.
Also, the effect function is returning a cleanup function in the author's solution, which runs when the component unmounts or before running the effect the next time (when the dependencies change). This cleanup function calls clearInterval, which means the stale closure won't be executed again, and the number of concurrently active intervals doesn't increase.
Admittedly, this proposed solution has a huge bug: clearing the interval and starting a new interval every time the count changes does not lead to a nice periodic 2s interval, the gaps between two logs might be much larger - the logging is essentially debounced and will only run if no increment happened in the last 2s. If this is not desired, a ref might be a much simpler solution:
const [count, setCount] = useState(0);
const countRef = useRef(0);
countRef.current = count;
useEffect(function() {
setInterval(function log() {
console.log(`Count is: ${countRef.current}`);
}, 2000);
}, []);

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>;
};