I can see my state value being updated in useEffect, however, the value is still the same in a function that is being triggered every 5 seconds. Is there any way to resolve this?
const [check, setCheck] = useState(true);
// Button to toggle Check
const buttonToToggleCheckValue = () => {
console.log("Toggle check");
setCheck(!check);
};
// Call this function every 5 seconds
const triggeredEveryFiveSeconds = () => {
console.log("Check value: " + check);
};
useEffect(() => {
console.log("useEffect Check value: " + check);
}, [check]);
---output---
Check value: true
Check value: true
Check value: true
Toggle check
useEffect Check value: false
Check value: true <--- Value should be false
Check value: true
Check value: true
The problem is that whenever the state changes your component gets re-rendered and initialises the state as true. You can use useRef as shown in the below snippet.
const check = useRef(true);
// Button to toggle Check
const buttonToToggleCheckValue = () => {
console.log('Toggle check');
check.current = !check.current
};
// Call this function every 5 seconds
const triggeredEveryFiveSeconds = () => {
console.log('Check value: ' + check.current);
};
useEffect(() => {
console.log('useEffect Check value: ' + check.current);
}, [check]);
useEffect(() => {
setInterval(() => {
triggeredEveryFiveSeconds();
}, 5 * 1000);
}, []);
ref will maintain the value over multiple renders.