Understanding implications of useEffect

Let’s explore how useEffect behaves when state updates involve objects — step by step.

Updating the entire object state.
Updating with the same reference.
Updating and watching inner changes to an object.

Updating state in its entirety

1
import { useEffect, useState } from "react"
2

3
export default function ()  {
4
  const [user, setUser] = useState({name: 'ashfaq', age:30, work: { exp: 6}})
5
  useEffect(() => {
6
    console.log('user updated')
7
  }, [user])
8

9
  useEffect(() => {
10
    const id = setInterval(() => {
11
      setUser({name: 'ashfaq', age:30, work: { exp: 2}})
12
    }, 1000)
13
    return () => clearInterval(id)
14
  }, [])
15
  return <div>
16
    my name is {user.name}
17
    <p>
18
      current: {user.age}
19
    </p>
20
  </div>
21
}

You can see in the browser console we get the “user updated” message every second though we are updating with the exact same object, this is because we are creating a new object and react sees it as different object as it matches these internally based on address space (Object comparison).

Updating react object using the same object reference

Contrary to earlier example, if we try to update the state referencing the same user object we wouldn’t get any messages in the console.

1
import {useEffect, useState} from 'react'
2

3
export default function Sample() {
4
  const [user, setUser] = useState({name: 'ashfaq', age:30, work: { exp: 2}})
5
  useEffect(() => {
6
    console.log('user updated')
7
  }, [user])
8

9
  useEffect(() => {
10
    const id = setInterval(() => {
11
      setUser(user)
12
    }, 1000)
13
    return () => clearInterval(id)
14
  }, [])
15
  return <div>
16
    my name is {user.name}
17
    <p>
18
      current: {user.age}
19
    </p>
20
  </div>
21
}

Watching inner changes of a react state

Now lets watch inner property’s reactivity.

1
import { useEffect, useState } from "react"
2

3
export default function Sample() {
4
  const [user, setUser] = useState({name: 'ashfaq', age:30, work: { exp: 2}})
5
  useEffect(() => {
6
    console.log('age updated')
7
  }, [user.age])
8

9
  useEffect(() => {
10
    console.log('user updated')
11
  }, [user])
12

13
  useEffect(() => {
14
    const id = setInterval(() => {
15
      setUser((x) => ({...x, age: x.age+1}))
16
    }, 2000)
17
    return () => clearInterval(id)
18
  }, [])
19
  return <div>
20
    my name is {user.name}
21
    <p>
22
      current: {user.age}
23
    </p>
24
  </div>
25
}

In above example we get to see both the prompts “age updated” & “user updated”, understanding this is critical.

Though react allows watching inner state change, we have to be careful as it is essentially replacing the entire object and exposing the state change of both “user” & “user.age”, we should be careful writing code that accommodates only for changes in that variable.

For example, if we write code for “user.id” we should make sure that doesn’t impact the changes in “user” as this is going to trigger 2 useEffects.

Extending the same concept for inner states

1
import { useEffect, useState } from 'react'
2
// `app/page.tsx` is the UI for the `/` URL
3
export default function Page() {
4
  const [user, setUser] = useState({name: 'ashfaq', age:30, work: { exp: 2}})
5
  useEffect(() => {
6
    console.log('age updated')
7
  }, [user.age])
8

9
  useEffect(() => {
10
    console.log('work updated')
11
  }, [user.work])
12

13
  useEffect(() => {
14
    console.log('user updated')
15
  }, [user])
16

17
  useEffect(() => {
18
    const id = setInterval(() => {
19
      setUser((x) => ({...x, work: {exp: 3}}))
20
    }, 2000)
21
    return () => clearInterval(id)
22
  }, [])
23
  return <div>
24
    my name is {user.name}
25
    <p>
26
      current: {user.age}
27
    </p>
28
  </div>
29
}

Here we see similar logs except that “user updated” is replaced with “work updated” as we are replacing the inner object altogether.

It is important to notice that our useEffect for “user.age” is not updating though we are replacing the entire object.

Now lets try to update the inner objects “exp”

1
import { useEffect, useState } from "react"
2

3
export default function Sample() {
4
  const [user, setUser] = useState({name: 'ashfaq', age:30, work: { exp: 2}})
5
  useEffect(() => {
6
    console.log('age updated')
7
  }, [user.age])
8

9
  useEffect(() => {
10
    console.log('work updated')
11
  }, [user.work])
12

13
  useEffect(() => {
14
    console.log('user updated')
15
  }, [user])
16

17
  useEffect(() => {
18
    const id = setInterval(() => {
19
      setUser((x) => ({...x, work: {exp: 3}}))
20
    }, 2000)
21
    return () => clearInterval(id)
22
  }, [])
23
  return <div>
24
    my name is {user.name}
25
    <p>
26
      current: {user.age}
27
    </p>
28
  </div>
29
}

Now we see the console has “work updated”, “user updated” & “work exp updated”, this follows the earlier state update philosphy where useEffect runs of the object change and also the inner property change.

Conclusion

Using multiple useEffects on a densely populated state should be done with care, if its too must nesting, maybe a state management library is a better choice.
Ideally watching inner changes explicitly when required would be advised as it would not trigger state changes on the object itself.