React.js useState 值不异步匹配

Question

I'm having an odd issue where some times the value passed into useState is not the same as the variable for useState . This happens on the same UI component each time while others are not having the issue. Just wanted to double check if I'm doing anything wrong here.

// userData is from Redux store
const {userData} = props 

const [installed, setInstalled] = useState(userData.installed)  // installed: boolean

console.log(userData.installed) // returns true
console.log(installed) // returns false
console.log(userData) // installed: true

Reason I'm using useState is because I'm using it to render a button that will be toggled, as well as displaying an indicator whether it is toggled or not.

<Button onClick={() => setInstalled(!installed) />

Answer 1

I recommend to use useEffect to watch the state inside your Redux store then update the local state based on that changes :

const [userData] = props ;
const [installed, setInstalled] = useState(userData.installed)

useEffect(() => {
  setInstalled(userData.installed)
},[userData])