State not updating as expected useing React-Native, useState, and setInterval - react-native

Question

There is a count down timer activated by a play/pause button. setInterval is called in run passing in two functions countDown and vibrate. countDown decrements the state of the timer.
Within vibrate I want the phone to vibrate when the timer reaches a certain number, however, within vibrate "timer" is always 1500 until the pause button is pressed, and when play is pressed again "timer" is the value it had when paused.
In clockify which displays the time, "timer" is the current value of "timer" and the timer counts down.
I've read for hours here trying to fix this (which seems like a closure issue?) but could not come up with a solution, other than refactoring this into a class and use this.state
import { StatusBar } from 'expo-status-bar'
import React, { useState } from 'react'
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { AntDesign } from '#expo/vector-icons'
import { FontAwesome } from '#expo/vector-icons'
let intervalId = null
export default function App() {
const [timer, setTimer] = useState(1500),
[running, setRunning] = useState(false)
const reset = () => {
setTimer(1500)
setRunning(false)
clearInterval(intervalId)
}
const playPauseIcon = () => {
if (!running) {
return ( <FontAwesome name="play" style={styles.icons} /> )
} else {
return ( <FontAwesome name="pause" style={styles.icons} /> )
}
}
const playPause = () => {
if (!running) {
setRunning(true)
run()
} else {
setRunning(false)
this.clearInterval(intervalId)
}
}
const run = () => {
intervalId = setInterval(consolidateFunc, 1000)
}
const consolidateFunc = () => {
countDown()
vibrate()
}
const countDown = () => {
console.log("timer in countDown" + timer) // always logs 1500, 1500, 1500 until the play/pause button is pressed
setTimer(timer => timer - 1)
}
const vibrate = () => {
console.log("timer in buzz " + timer) // always logs 1500, 1500, 1500 until the play/pause button is pressed
if (timer < 1496) {
// vibrate
console.log("vibrate")
clearInterval(intervalId)
}
}
const clockify = () => {
console.log("timer in clock " + timer) //counts down 1500, 1499, 1498, etc.
const minutes = Math.floor(timer / 60),
seconds = timer % 60
if (seconds < 10 && minutes < 10) {
return "0" + minutes + ":" + "0" + seconds;
} else if (seconds < 10) {
return minutes + ":" + "0" + seconds;
} else {
return minutes + ":" + seconds;
}
}
return (
<View style={styles.container}>
<View style={styles.controls}>
<TouchableOpacity onPress={playPause} style={styles.reset}>{playPauseIcon()}</TouchableOpacity>
<TouchableOpacity style={styles.reset} onPress={reset}>
<FontAwesome name="undo" style={styles.icons} />
</TouchableOpacity>
</View>
<Text style={styles.status}>Time Remaining</Text>
<Text style={styles.timeLeft}>{clockify()}</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
status: {
fontSize: 30,
paddingTop: 20
},
timeLeft: {
fontSize: 30
},
controls: {
flexDirection: "row",
alignItems: "center"
},
icons: {
fontSize: 25,
color: "black",
paddingLeft: 10
},
reset: {
paddingTop: 15,
paddingRight: 5,
paddingLeft: 5
}
});
View on snack: https://snack.expo.io/R1ST9Ct4U
I can make it work using a class but I would prefer not to if possible, it seems like there should be a way.
import { StatusBar } from 'expo-status-bar'
import React, { useState } from 'react'
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { AntDesign } from '#expo/vector-icons'
import { FontAwesome } from '#expo/vector-icons'
const defaultState = {timer: 1500, running: false };
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = defaultState
this.reset = this.reset.bind(this)
this.clockify = this.clockify.bind(this);
this.run = this.run.bind(this);
this.consolidateFunc = this.consolidateFunc.bind(this)
this.countDown = this.countDown.bind(this)
this.vibrate = this.vibrate.bind(this)
this.playPauseIcon= this.playPauseIcon.bind(this)
this.playPause = this.playPause.bind(this)
}
reset() {
this.setState(defaultState)
clearInterval(this.intervalId)
}
clockify() {
const minutes = Math.floor(this.state.timer / 60);
const seconds = this.state.timer % 60;
if (seconds < 10 && minutes < 10) {
return "0" + minutes + ":" + "0" + seconds;
} else if (seconds < 10) {
return minutes + ":" + "0" + seconds;
} else {
return minutes + ":" + seconds;
}
}
run() {
this.intervalId = setInterval(this.consolidateFunc, 1000);
}
consolidateFunc() {
this.countDown();
this.vibrate();
}
countDown() {
console.log("timer in countDown: " + this.state.timer)
this.setState({ timer: this.state.timer - 1 });
}
vibrate() {
console.log("timer in vibrate: " + this.state.timer)
if (this.state.timer < 1496) {
// vibrate
console.log("vibrate")
clearInterval(this.intervalId)
}
}
playPauseIcon() {
if (!this.state.running) {
return ( <FontAwesome name="play" style={styles.icons} /> )
} else {
return ( <FontAwesome name="pause" style={styles.icons} /> )
}
}
playPause() {
if (!this.state.running) {
this.setState({ running: true });
this.run();
} else {
this.setState({ running: false });
clearInterval(this.intervalId);
}
}
render() {
return (
<View style={styles.container}>
<View style={styles.controls}>
<TouchableOpacity onPress={this.playPause} style={styles.reset}>{this.playPauseIcon()}</TouchableOpacity>
<TouchableOpacity style={styles.reset} onPress={this.reset}>
<FontAwesome name="undo" style={styles.icons} />
</TouchableOpacity>
</View>
<Text style={styles.status}>Time Remaining</Text>
<Text style={styles.timeLeft}>{this.clockify()}</Text>
<StatusBar style="auto" />
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
status: {
fontSize: 30,
paddingTop: 20
},
timeLeft: {
fontSize: 30
},
controls: {
flexDirection: "row",
alignItems: "center"
},
icons: {
fontSize: 25,
color: "black",
paddingLeft: 10
},
reset: {
paddingTop: 15,
paddingRight: 5,
paddingLeft: 5
}
});
View as class on snack: https://snack.expo.io/mIG7TqB4I

Answer 1

I took a walk and the answer came to me.
The answer was to to eliminate the consolidateFunc, pass countDown to setInterval, move the code inside vibrate into useEffect, delete vibrate.
import { StatusBar } from 'expo-status-bar'
import React, { useState, useEffect } from 'react'
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { AntDesign } from '#expo/vector-icons'
import { FontAwesome } from '#expo/vector-icons'
let intervalId = null
export default function App() {
const [timer, setTimer] = useState(1500),
[running, setRunning] = useState(false)
const reset = () => {
setTimer(1500)
setRunning(false)
clearInterval(intervalId)
}
const playPauseIcon = () => {
if (!running) {
return ( <FontAwesome name="play" style={styles.icons} /> )
} else {
return ( <FontAwesome name="pause" style={styles.icons} /> )
}
}
const playPause = () => {
if (!running) {
setRunning(true)
run()
} else {
setRunning(false)
clearInterval(intervalId)
}
}
const run = () => {
intervalId = setInterval(countDown, 1000)
}
const countDown = () => {
setTimer(timer => timer - 1)
}
const clockify = () => {
//console.log("timer in clock " + timer)
const minutes = Math.floor(timer / 60),
seconds = timer % 60
if (seconds < 10 && minutes < 10) {
return "0" + minutes + ":" + "0" + seconds;
} else if (seconds < 10) {
return minutes + ":" + "0" + seconds;
} else {
return minutes + ":" + seconds;
}
}
useEffect(() => {
console.log("timer in useEffect " + timer)
if (timer < 1496) {
// vibrate
console.log("vibrate")
clearInterval(intervalId)
}
})
return (
<View style={styles.container}>
<View style={styles.controls}>
<TouchableOpacity onPress={playPause} style={styles.reset}>{playPauseIcon()}</TouchableOpacity>
<TouchableOpacity style={styles.reset} onPress={reset}>
<FontAwesome name="undo" style={styles.icons} />
</TouchableOpacity>
</View>
<Text style={styles.status}>Time Remaining</Text>
<Text style={styles.timeLeft}>{clockify()}</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
status: {
fontSize: 30,
paddingTop: 20
},
timeLeft: {
fontSize: 30
},
controls: {
flexDirection: "row",
alignItems: "center"
},
icons: {
fontSize: 25,
color: "black",
paddingLeft: 10
},
reset: {
paddingTop: 15,
paddingRight: 5,
paddingLeft: 5
}
});