I'm having an issue while using useState and useEffect hooks
import { useState, useEffect } from "react";
const counter = ({ count, speed }) => {
const [inc, setInc] = useState(0);
useEffect(() => {
const counterInterval = setInterval(() => {
if(inc < count){
setInc(inc + 1);
}else{
clearInterval(counterInterval);
}
}, speed);
}, [count]);
return inc;
}
export default counter;
Above code is a counter component, it takes count in props, then initializes inc with 0 and increments it till it becomes equal to count
The issue is I'm not getting the updated value of inc in useEffect's and setInterval's callback every time I'm getting 0, so it renders inc as 1 and setInterval never get clear. I think inc must be in closure of use useEffect's and setInterval's callback so I must get the update inc there, So maybe it's a bug?
I can't pass inc in dependency ( which is suggested in other similar questions ) because in my case, I've setInterval in useEffect so passing inc in dependency array is causing an infinite loop
I have a working solution using a stateful component, but I want to achieve this using functional component
There are a couple of issues:
You're not returning a function from useEffect to clear the interval
Your inc value is out of sync because you're not using the previous value of inc.
One option:
const counter = ({ count, speed }) => {
const [inc, setInc] = useState(0);
useEffect(() => {
const counterInterval = setInterval(() => {
setInc(inc => {
if(inc < count){
return inc + 1;
}else{
// Make sure to clear the interval in the else case, or
// it will keep running (even though you don't see it)
clearInterval(counterInterval);
return inc;
}
});
}, speed);
// Clear the interval every time `useEffect` runs
return () => clearInterval(counterInterval);
}, [count, speed]);
return inc;
}
Another option is to include inc in the deps array, this makes things simpler since you don't need to use the previous inc inside setInc:
const counter = ({ count, speed }) => {
const [inc, setInc] = useState(0);
useEffect(() => {
const counterInterval = setInterval(() => {
if(inc < count){
return setInc(inc + 1);
}else{
// Make sure to clear your interval in the else case,
// or it will keep running (even though you don't see it)
clearInterval(counterInterval);
}
}, speed);
// Clear the interval every time `useEffect` runs
return () => clearInterval(counterInterval);
}, [count, speed, inc]);
return inc;
}
There's even a third way that's even simpler:
Include inc in the deps array and if inc >= count, return early before calling setInterval:
const [inc, setInc] = useState(0);
useEffect(() => {
if (inc >= count) return;
const counterInterval = setInterval(() => {
setInc(inc + 1);
}, speed);
return () => clearInterval(counterInterval);
}, [count, speed, inc]);
return inc;
The issue here is that the callback from clearInterval is defined every time useEffect runs, which is when count updates. The value inc had when defined is the one that will be read in the callback.
This edit has a different approach. We include a ref to keep track of inc being less than count, if it is less we can continue incrementing inc. If it is not, then we clear the counter (as you had in the question). Every time inc updates, we evaluate if it is still lesser than count and save it in the ref. This value is then used in the previous useEffect.
I included a dependency to speed as #DennisVash correctly indicates in his answer.
const useCounter = ({ count, speed }) => {
const [inc, setInc] = useState(0);
const inc_lt_count = useRef(inc < count);
useEffect(() => {
const counterInterval = setInterval(() => {
if (inc_lt_count.current) {
setInc(inc => inc + 1);
} else {
clearInterval(counterInterval);
}
}, speed);
return () => clearInterval(counterInterval);
}, [count, speed]);
useEffect(() => {
if (inc < count) {
inc_lt_count.current = true;
} else {
inc_lt_count.current = false;
}
}, [inc, count]);
return inc;
};
The main problems that need to be dealt with are Closures and clearing interval on a condition which depends on props.
You should add the conditional check within the functional setState:
setInc(inc => (inc < count ? inc + 1 : inc));
Also, the clearing interval should happen on unmount.
If you want to add clearInterval on condition (inc < count), you need to save references for the interval id and the increased number:
import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
const useCounter = ({ count, speed }) => {
const [inc, setInc] = useState(0);
const incRef = useRef(inc);
const idRef = useRef();
useEffect(() => {
idRef.current = setInterval(() => {
setInc(inc => (inc < count ? inc + 1 : inc));
incRef.current++;
}, speed);
return () => clearInterval(idRef.current);
}, [count, speed]);
useEffect(() => {
if (incRef.current > count) {
clearInterval(idRef.current);
}
}, [count]);
useEffect(() => {
console.log(incRef.current);
});
return inc;
};
const App = () => {
const inc = useCounter({ count: 10, speed: 1000 });
return <h1>Counter : {inc}</h1>;
};
ReactDOM.render(<App />, document.getElementById('root'));
Related
I'm trying to create a simple timer in my react app that counts up from 0 to 10 and then stops. But I can't get it to work without getting caught in an infinite loop.
import React, { useState, useEffect } from "react";
const Countdown = () => {
const [countdown, setCountdown] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setCountdown(countdown + 1);
}, 1000);
if (countdown >= 10) {
return () => clearInterval(interval);
}
}, [countdown]);
return <div>{countdown}</div>;
};
export default Countdown;
You have to stop using setInterval if it is greater than 10. But you are clearing the interval if it is greater than 10 but the setCountdown still setting countdown.
But you should use setTimeout instead of setInterval and initialize the countdown to 1
CODESANDBOX
import React, { useState, useEffect } from "react";
const Countdown = () => {
const [countdown, setCountdown] = useState(1);
useEffect(() => {
let timeout;
if (countdown < 10) {
timeout = setTimeout(() => {
setCountdown(countdown + 1);
}, 1000);
}
return () => clearTimeout(timeout);
}, [countdown]);
return <div>{countdown}</div>;
};
export default Countdown;
// here is the alternative to count the process time.
console.time('looper');
for(let a=0; a<100000; a++){}
console.timeEnd('looper');
I have a component like this:
import { useEffect, useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
console.log("comp run");
const tick = () => {
setCount(count + 1);
console.log(count);
};
useEffect(() => {
const timer = setInterval(tick, 10000);
console.log("effect run");
return () => {
clearInterval(timer);
console.log("clear func run");
};
}, []);
return <div>{count}</div>;
}
export default Counter;
When the code runs, the console outputs as follows:
Output immediately when the program runs:
comp run
effect run
after 10 seconds :
comp run
0
after 10 seconds :
comp run
0
after 10 seconds :
0 (then it keeps increasing by 0 every ten seconds)
What I don't understand here is exactly this: "comp run" is printed on the screen 3 times. Why 3 ?
This is because useEffect memoize all values inside it. You can use two ways:
Add count to useEffect's dependencies array. And when count changes, useEffect will refreshed.
useEffect(() => {
//Your old code here
}, [count]); //Here
Create a function inside of useCallback hook and memoize function for better performance. Works like in first way, but dependent by tick fucntion, wich dependent by count state.
const tick = useCallback(() => {
setCount(count + 1);
console.log(count);
}, [count]);
useEffect(() => {
const timer = setInterval(tick, 1000);
console.log("effect run");
return () => {
clearInterval(timer);
console.log("clear func run");
};
}, [tick]);
React native PanResponder draggable interrupted by setState
I'm having a state variable to track the seconds
const [seconds, setSeconds] = useState(0)
useEffect(() => {
const interval = setInterval(() => {
if (seconds > 59) {
setSeconds(0)
} else {
setSeconds((seconds) => seconds + 1)
}
}, 1000)
return () => clearInterval(interval)
}, [seconds])
I'm also using a pan responder draggable
import React, { useState, useRef, ReactNode } from 'react'
import {
StyleSheet,
Animated,
PanResponder,
PanResponderGestureState,
Text
} from 'react-native'
const Draggable = (props) => {
const { draggable, isDropZone, moveToDropArea } = props
const [showDraggable, setshowDraggable] = useState(true)
const pan = useRef<Animated.AnimatedValueXY>(new Animated.ValueXY()).current
const panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: Animated.event([
null,
{
dx: pan.x,
dy: pan.y,
},
]),
onPanResponderRelease: (e, gesture) => {
if (isDropZone(gesture)) {
setshowDraggable(false)
moveToDropArea()
} else {
Animated.spring(pan, {
toValue: { x: 0, y: 0 },
useNativeDriver: false,
}).start()
}
pan.flattenOffset()
},
})
return (
<Animated.View {...panResponder.panHandlers} style={[pan.getLayout()]}>
<Text>{seconds}</Text>
</Animated.View>
)
}
When I try to drag the draggable, its moves but when the state updated the component rerenders and the Draggable item goes back to the original place.
How to prevent this?
Thanks in advance.
Try writing your useEffect hook like this:
useEffect(() => {
const interval = setInterval(() => {
setSeconds(currentSeconds => currentSeconds > 59 ? 0 : currentSeconds + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
This way it will not be triggered every time seconds' state changes.
However, changing the state will still make your component rerender. If you want to prevent rerendering, you should use useRef instead of useState.
const seconds = useRef(0);
useEffect(() => {
const interval = setInterval(() => {
seconds.current = seconds.current > 59 ? 0 : seconds.current + 1;
}, 1000);
return () => clearInterval(interval);
}, [seconds]);
console.log(seconds.current); // will log the last saved number of seconds before the last re-render
But if you need to display the changes of the seconds, you will need your component to rerender on seconds state change. In this case, I suggest you separate your scroll logic to another (maybe parent) component so it would not be reset on re-renders that are caused by the seconds' state change.
Pass empty array in second parameter of useEffect hook.
The useEffect hook runs the callback function when a component mounts to the dom, which is similar like componentDidMount life cycle method in class components.
The setInterval function runs the setSeconds method for every one second.
Inside the useEffect hook we are returning a clearInterval function with a timer argument, so that setInterval function is stopped when a component unmounts from the dom, which is similar like componentWillUnmount method.
empty array will run useEffect on mount, remain silent throughout its life.
useEffect(() => {
const interval = setInterval(() => {
if (seconds > 59) {
setSeconds(0)
} else {
setSeconds((seconds) => seconds + 1)
}
}, 1000)
return () => clearInterval(interval)
},[])
I ran into a situation where I set an interval timer from inside useEffect. I can access component variables and state inside the useEffect, and the interval timer runs as expected. However, the timer callback doesn't have access to the component variables / state. Normally, I would expect this to be an issue with "this". However, I do not believe "this" is the the case here. No puns were intended. I have included a simple example below:
import React, { useEffect, useState } from 'react';
const App = () => {
const [count, setCount] = useState(0);
const [intervalSet, setIntervalSet] = useState(false);
useEffect(() => {
if (!intervalSet) {
setInterval(() => {
console.log(`count=${count}`);
setCount(count + 1);
}, 1000);
setIntervalSet(true);
}
}, [count, intervalSet]);
return <div></div>;
};
export default App;
The console outputs only count=0 each second. I know that there's a way to pass a function to the setCount which updates current state and that works in this trivial example. However, that was not the point I was trying to make. The real code is much more complex than what I showed here. My real code looks at current state objects that are being managed by async thunk actions. Also, I am aware that I didn't include the cleanup function for when the component dismounts. I didn't need that for this simple example.
The first time you run the useEffect the intervalSet variable is set to true and your interval function is created using the current value (0).
On subsequent runs of the useEffect it does not recreate the interval due to the intervalSet check and continues to run the existing interval where count is the original value (0).
You are making this more complicated than it needs to be.
The useState set function can take a function which is passed the current value of the state and returns the new value, i.e. setCount(currentValue => newValue);
An interval should always be cleared when the component is unmounted otherwise you will get issues when it attempts to set the state and the state no longer exists.
import React, { useEffect, useState } from 'react';
const App = () => {
// State to hold count.
const [count, setCount] = useState(0);
// Use effect to create and clean up the interval
// (should only run once with current dependencies)
useEffect(() => {
// Create interval get the interval ID so it can be cleared later.
const intervalId = setInterval(() => {
// use the function based set state to avoid needing count as a dependency in the useEffect.
// this stops the need to code logic around stoping and recreating the interval.
setCount(currentCount => {
console.log(`count=${currentCount}`);
return currentCount + 1;
});
}, 1000);
// Create function to clean up the interval when the component unmounts.
return () => {
if (intervalId) {
clearInterval(intervalId);
}
}
}, [setCount]);
return <div></div>;
};
export default App;
You can run the code and see this working below.
const App = () => {
// State to hold count.
const [count, setCount] = React.useState(0);
// Use effect to create and clean up the interval
// (should only run once with current dependencies)
React.useEffect(() => {
// Create interval get the interval ID so it can be cleared later.
const intervalId = setInterval(() => {
// use the function based set state to avoid needing count as a dependency in the useEffect.
// this stops the need to code logic around stoping and recreating the interval.
setCount(currentCount => {
console.log(`count=${currentCount}`);
return currentCount + 1;
});
}, 1000);
// Create function to clean up the interval when the component unmounts.
return () => {
if (intervalId) {
clearInterval(intervalId);
}
}
}, [setCount]);
return <div></div>;
};
ReactDOM.render(<App />, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>
If you need a more complex implementation as mention in your comment on another answer, you should try using a ref perhaps. For example, this is a custom interval hook I use in my projects. You can see there is an effect that updates callback if it changes.
This ensures you always have the most recent state values and you don't need to use the custom updater function syntax like setCount(count => count + 1).
const useInterval = (callback, delay) => {
const savedCallback = useRef()
useEffect(() => {
savedCallback.current = callback
}, [callback])
useEffect(() => {
if (delay !== null) {
const id = setInterval(() => savedCallback.current(), delay)
return () => clearInterval(id)
}
}, [delay])
}
// Usage
const App = () => {
useInterval(() => {
// do something every second
}, 1000)
return (...)
}
This is a very flexible option you could use. However, this hook assumes you want to start your interval when the component mounts. Your code example leads me to believe you want this to start based on the state change of the intervalSet boolean. You could update the custom interval hook, or implement this in your component.
It would look like this in your example:
const useInterval = (callback, delay, initialStart = true) => {
const [start, setStart] = React.useState(initialStart)
const savedCallback = React.useRef()
React.useEffect(() => {
savedCallback.current = callback
}, [callback])
React.useEffect(() => {
if (start && delay !== null) {
const id = setInterval(() => savedCallback.current(), delay)
return () => clearInterval(id)
}
}, [delay, start])
// this function ensures our state is read-only
const startInterval = () => {
setStart(true)
}
return [start, startInterval]
}
const App = () => {
const [countOne, setCountOne] = React.useState(0);
const [countTwo, setCountTwo] = React.useState(0);
const incrementCountOne = () => {
setCountOne(countOne + 1)
}
const incrementCountTwo = () => {
setCountTwo(countTwo + 1)
}
// Starts on component mount by default
useInterval(incrementCountOne, 1000)
// Starts when you call `startIntervalTwo(true)`
const [intervalTwoStarted, startIntervalTwo] = useInterval(incrementCountTwo, 1000, false)
return (
<div>
<p>started: {countOne}</p>
<p>{intervalTwoStarted ? 'started' : <button onClick={startIntervalTwo}>start</button>}: {countTwo}</p>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>
The problem is the interval is created only once and keeps pointing to the same state value. What I would suggest - move firing the interval to separate useEffect, so it starts when the component mounts. Store interval in a variable so you are able to restart it or clear. Lastly - clear it with every unmount.
const App = () => {
const [count, setCount] = React.useState(0);
const [intervalSet, setIntervalSet] = React.useState(false);
React.useEffect(() => {
setIntervalSet(true);
}, []);
React.useEffect(() => {
const interval = intervalSet ? setInterval(() => {
setCount((c) => {
console.log(c);
return c + 1;
});
}, 1000) : null;
return () => clearInterval(interval);
}, [intervalSet]);
return null;
};
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="root"></div>
I am unable to access the state within an interval. Here I want to access counter inside interval when the counter gets equal to 10 I want to stop it.
Note: Here I don't want to put an interval inside useEffect because I need to start the interval in a specific time, by handling an event.
export default props => {
const [counter, setCounter] = useState(0);
const startInterval = () => {
const timeout = setInterval(() => {
setCounter(counter + 1);
console.log("counter: ", counter); // alway return 0
if(counter === 10) clearInterval(timeout);
}, 1000);
};
}
As I am seeing here even your setCounter(counter+1) wont update, because of lexical scope. So you have to change it like this:
setCounter(counter => counter + 1);
Also because of lexical scope you wont access counter to check condition, so you have to make a variable and update that inside functional component by asigning counter to it, then check it with if condition.
Complete Code code:
let myCounter = 0;
let timeout = null;
export default CounterApp = props => {
const [counter, setCounter] = useState(0);
// Also don't forget this
useEffect(()=> {
return ()=> clearInterval(timeout);
}, []);
myCounter = counter;
const startInterval = () => {
timeout = setInterval(() => {
setCounter(counter => counter + 1);
console.log("counter: ", myCounter); // counter always return 0 but myCounter the updated value
if(myCounter === 10) clearInterval(timeout);
}, 1000);
};
}
I came across this exact problem not too long ago. Hooks don't work exactly as you'd expect in relation to setInterval. I found the solution on Dan Abramov's blog: You can useRef to combine multiple useEffects. Through his useInterval implementation you can also start and stop the interval by setting the timer to null
import React, { useState, useEffect, useRef } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const [time, setTime] = useState(null); // timer doesn't run initially
useInterval(() => {
// Your custom logic here
setCount(count + 1);
}, time);
return <>
<h1>{count}</h1>
<div onClick={() => setTime(1000)}>Start</div>
<div onClick={() => setTime(null)}>Stop</div>
</>;
}
import React, { useState, useEffect, useRef } from 'react';
function useInterval(callback, delay) {
const savedCallback = useRef();
// Remember the latest callback.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}