CODEWITHSUNDEEP
javascriptreactjsreduxuse-state
en6in33r
en6in33r

Reputation: 266

React.js useState values do not match asynchronously

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) />

Upvotes: 1

Views: 385

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 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])

Upvotes: 3

Related Questions