In React, I often use the states of constants in other operations following setState() (or api interactions), but it’s common for the state to not be updated yet when that section of the code runs, most of the time resulting in errors/unexpected behavior.
Is there a best practice for dealing with this? Or a recommended alternative to useState itself?
Thanks :)
You can use useEffect to execute a function after the state has changed, but this method will fire the what's inside the useEffect first render as well, and to fix that you need to create a custom hook
const [age, setAge] = useState(0)
useEffect(() => {
console.log('the age has changed', age)
}, [age])Without hooks react setState gets a callback function, but with hooks you should use useEffect for doing it.
Because setState() is asynchronous, mostly errors/unexpected results occur due to this behavior, so you need to understand this asynchronous behavior properly by playing state. If you handle component life cycle properly with the proper state handling then you will not see any unexpected behavior. More info: https://reactjs.org/docs/state-and-lifecycle.html and https://css-tricks.com/understanding-react-setstate/