Why doesn't a useEffect hook trigger with an object in the dependency array?

Question

I'm noticing something really strange while working with hooks, I've got the following:

import React, { useState, useEffect } from "react";

const [dependency1, setDependency1] = useState({});
const [dependency2, setDependency2] = useState([]);

useEffect(() => {
  console.log("dependency 1 got an update");
}, [dependency1]);

useEffect(() => {
  console.log("dependency 2 got an update");
}, [dependency2]);

setInterval(() => {
  setDependency1(prevDep1 => {
    const _key = "test_" + Math.random().toString();
    if (prevDep1[_key] === undefined) prevDep1[_key] = [];
    else prevDep1[key].push("foo");
    return prevDep1;
  })
  setDependency2(prevDep2 => [...prevDep2, Math.random()]);
}, 1000);

for some reason only the useEffect with dependency2 (the array where items get added) triggers, the one with dependency1 (the object where keys get added) doesn't trigger..

Why is this happening, and how can I make it work?

Ramesh Reddy · Accepted Answer · 2020-06-30 14:57:17Z

3

setInterval(() => {
    setDependency1(prevDep1 => {
      const _key = "test_" + Math.random().toString();
      return {...prevDep1, [_key]: [...(prevDep1[_key] || []), 'foo']   }
    })
    setDependency2(prevDep2 => [...prevDep2, Math.random()]);
  }, 1000);

State should be updated in an immutable way.

answered Jun 30, 2020 at 14:57

Ramesh Reddy

10.7k3 gold badges22 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mordechai · Accepted Answer · 2020-06-30 15:00:15Z

3

React will only check for reference equality when deciding a dependency changed, so if the old and new values pass a === check, it considers it unchanged.

In your first dependency you simply added a key to the existing object, thus not changing the actual object. The second dependency actually gets replaced altogether when spreading the old values into a new array.

edited Jun 30, 2020 at 15:00

answered Jun 30, 2020 at 14:50

Mordechai

16.5k2 gold badges51 silver badges89 bronze badges

2 Comments

Thimma Over a year ago

I updated my question so it returns something, but it still does not work..

Mordechai Over a year ago

The last paragraph is no longer valid, but the other point remains true. As long as the old and new props pass a reference equality check === it will not trigger a change.

mez · Accepted Answer · 2020-06-30 14:48:44Z

0

You're returning an assignment statement here:

setDependency1(prevDep1 => prevDep1["test_" + Math.random().toString()] = ["foo"]);

You should return an object. Maybe something like:

setDependency1(prevDep1 => ({ ...prevDep1, ["test_" + Math.random().toString()]: ["foo"] }));

answered Jun 30, 2020 at 14:48

mez

1,2829 silver badges13 bronze badges

4 Comments

Thimma Over a year ago

but what if I have to use if-statements?

mez Over a year ago

Remove the short return syntax and use it like a normal function. (e.g prevDep1 => { if (someCondition) { return someValue; } else { return otherValue; } })

Thimma Over a year ago

that unfortunately doesn't work either, see my updated question please..

mez Over a year ago

Check @Mordechai 's answer. He has already pointed out the problem. The equality check fails because you're returning the same object every time. You could try replacing return prevDep1 with return { ...prevDep1 }

Collectives™ on Stack Overflow

Why doesn't a useEffect hook trigger with an object in the dependency array?

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related