I'm using hooks for updating state. in my code I have an AppState event listener and whenever it triggers I'm updating the appState using setAppState , however the appState inside the event listener did not change. but the value is updating outside the listener. can anyone explain why is behaving like that?
Here is my code:
import React, { FunctionComponent, useEffect, useState } from "react"
import { View, AppState, AppStateStatus } from "react-native"
const Test: FunctionComponent<any> = (props: any) => {
const [appState, setAppState] = useState < AppStateStatus > (AppState.currentState)
useEffect(() => {
AppState.addEventListener("change", _handleAppStateChange)
},[])
const _handleAppStateChange = (nextAppState: AppStateStatus) => {
//appState not Changing here
console.log(appState, "app state")
if (appState.match(/inactive|background/) && nextAppState === "active") {
console.log("App has come to the foreground!")
activateRealtime()
} else if (appState === "active" && nextAppState.match(/inactive|background/)) {
console.log("App has come to background!")
}
setAppState(nextAppState)
}
//appState updated here
console.log(appState, "app state")
return <View />
}
In your code appState is a stale closure the linter should have told you that you have missing dependencies.
I think the following will work
const _handleAppStateChange = useCallback(
(nextAppState) =>
//use callback for state setter so you don't
// create needless dependency or (as you did)
// create a stale closure
setAppState((currentAppState) => {
//logs current appstate
console.log(currentAppState, 'app state');
if (
currentAppState.match(/inactive|background/) &&
nextAppState === 'active'
) {
console.log('App has come to the foreground!');
activateRealtime();
} else if (
currentAppState === 'active' &&
nextAppState.match(/inactive|background/)
) {
console.log('App has come to background!');
}
return nextAppState;
}),
//only pass function as _handleAppStateChange
// on mount by providing empty dependency
[]
);
useEffect(() => {
AppState.addEventListener(
'change',
_handleAppStateChange
);
//clean up code when component unmounts
return () =>
AppState.removeEventListener(
'change',
_handleAppStateChange
);
//_handleAppStateChange is a dependency but useCallback
// has empty dependency so it is only created on mount
}, [_handleAppStateChange]);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.