1

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>
    )
}
Nisha Dave
  • 669
  • 1
  • 9
  • 25
  • with timeout, state updates are no longer batched; hence you get one more execution of `useEffect` hook – Yousaf Sep 26 '21 at 09:52

2 Answers2

4

React does state updates in batches. Which means, when you are setting state multiple times, it will update both the state in a single operation, resulting in reduced re-rending (which is good in most of the cases). You can learn more about this here.

potatoxchip
  • 516
  • 1
  • 7
  • 20
1

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.

Ashish Singh
  • 104
  • 9