Infinite loop in useEffect if I pass object as dependency

Question

I have an this piece of code in my React component.

I want to create new object from values of propArray. Like this linter complains that React Hook useEffect has a missing dependency data. But if I supply data to the array of useEffect it causes the infinite loop. I assume it is because I'm updating data object inside useEffect.

What should be done in this case?

const [data, setData] = useState({})
useEffect(() => {
      if (something) {

          const newObj = {
            ...
          }

        setData({data, ...newObj})
      }
}, [something, propArray]);

EDIT

Tried wrapping JSON.stringify(data) and passing it as dependency - works the same.

Also tried useRef

const [data, setData] = useState({})
const latestData = useRef(data)

useEffect(() => {
   if (something) {

      const newObj = {
          ...
      }

      latestData.current = newObj
   }
}, [something, propArray]);

But this way when I'm trying to pass lastestData.current as prop the component it is empty and it is not rerendering

Possible duplicate of react useEffect comparing objects

Clarity
– Clarity

2019-08-15 06:29:45 +00:00
Commented Aug 15, 2019 at 6:29 — Clarity
– Clarity, Commented Aug 15, 2019 at 6:29
Can you create a codepen of the issue?

ravibagul91
– ravibagul91

2019-08-15 07:04:41 +00:00
Commented Aug 15, 2019 at 7:04 — ravibagul91
– ravibagul91, Commented Aug 15, 2019 at 7:04
@ravibagul91link Comment out useEffect in Child component

Person
– Person

2019-08-15 07:16:20 +00:00
Commented Aug 15, 2019 at 7:16 — Person
– Person, Commented Aug 15, 2019 at 7:16

thathat · Accepted Answer · 2019-08-15 07:23:28Z

1

You could write the setData as

    setData(d => ({d, ...newObj}))
    //or maybe you mean
    setData(d => ({...d, ...newObj}))

So it doesn't depend on the current value of data

edit: fixed your sandbox with the above suggestion https://codesandbox.io/s/useeffect-basics-nz0st

edited Aug 15, 2019 at 7:23

answered Aug 15, 2019 at 6:44

thathat

5702 gold badges6 silver badges7 bronze badges

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

Comments

ravibagul91 · Accepted Answer · 2019-08-15 07:32:53Z

0

You can use another version of setNames using previous state, so that we don't need any dependency.

useEffect(() => {
    if (contentLoading) {
      const newNames = { a: "aa" };
      setNames(prevState => ({ ...prevState, ...newNames }));
    }
}, [contentLoading]);

For more on how to use previous state in setState, you can refer this.

Also you can refer When to use functional setState.

edited Aug 15, 2019 at 7:32

answered Aug 15, 2019 at 7:25

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Collectives™ on Stack Overflow

Infinite loop in useEffect if I pass object as dependency

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related