I am very new to react. I am experimenting with react and trying to undertand it's concepts right now.
I have a component that has two states,Name and room. I am using setstate to set room and name values, I have a 2 useeffects 1st one runs at initial render and gets the name and room value. second one is supposed to render as soon name or room changes
const Chat = ({location}) => {
const [userName, setUserName] = useState("");
const [userRoom, setUserRoom] = useState("");
useEffect(() => {
// console.log("initial use effect called")
const {name,room} = queryString.parse(location.search)
setUserName(name)
setUserRoom(room)
}, [])
useEffect(()=>{
console.log('name or room changed')
},[userName,userRoom])
return (
<div>
component
</div>
)
}
Since I am setting name and room one after another I expected second use effect to be called three times
(first time on initial render,second time when name changes,third time when room changes)
but it is only called twice. Also, if I add a timeout in initial useeffect,
second useeffect get called three times
const Chat = ({location}) => {
const [userName, setUserName] = useState("");
const [userRoom, setUserRoom] = useState("");
useEffect(() => {
// console.log("initial use effect called")
const {name,room} = queryString.parse(location.search)
setUserName(name)
setTimeout(()=>{
setUserRoom(room)
},0)
}, [])
useEffect(()=>{
console.log('name or room changed')
},[userName,userRoom])
return (
<div>
component
</div>
)
}
When setState is called multiple times in React event handler or synchronous lifecycle method, it will be batched into a single update. That's why you are getting two logs, initial render causes first log and setState causes second log and when you called useState inside setTimeOut then it logged as you expected because setTimeOut is an asynchronous operation and it behaves like this with other asynchronous operations such as async/await, then/catch, fetch, etc. because Separate state updates will not be batched in asynchronous operations.