React useEffect with property as dependency makes infinite loop

Question

I have a component:

const MyComp : React.FC<{ editing?: Data }> = ({editing = { title = '', description = '', date: new Date() } }) => {
    const [data, setData] = useState<Data>({...editing})
    useEffect(() => setData({...editing}), [editing])
    return (/* use data inside here to render component */)
}

The problem is that the useEffect is looping, so React is detecting that the editing prop is changing every, the thing is that i use MyComp without any props like this:

<MyComp></MyComp>

This is really confusing me, i'm kinda lost now on how React works, any ideas on why is this happening?

If editing is not specified as a prop, the default will be used. And it'll be a different default instance for each render and that will see the effect run and that will set the state and that will render ... — cartant
– cartant, Commented Jan 7, 2020 at 21:16

Vencovsky · Accepted Answer · 2020-09-09 10:58:53Z

8

Because editing is an object. Objects are compared by reference. If you don't pass the prop editing to the component, in each render, editing will receive a new link in memory, because you passing a default value to it. So useEffect will assume that dependencies have changed.

You can set primitive types to dependencies.

const MyComp : React.FC<{ editing?: Data }> = ({editing = { title = '', description = '', date: new Date() } }) => {
    const [data, setData] = useState<Data>({...editing})
    useEffect(() => setData({...editing}), [editing.title, editing.description, editing.date.getTime()])
    return (/* use data inside here to render component */)
}

edited Sep 9, 2020 at 10:58

Vencovsky

32.1k25 gold badges132 silver badges202 bronze badges

answered Jan 7, 2020 at 21:11

Alexander

1,4509 silver badges12 bronze badges

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

2 Comments

Paulo Marcio Over a year ago

Wow that was it, i was getting strange behaviors if i changed from {...editing} to just editing, really didn't get why, but i changed the code to this: editing = undefined and useState(editing || { /*default data here*/ }), inside useEffect just check if editing isn't undefined and setData, works fine now, thanks for the answer

Brian Thompson Over a year ago

This is correct. Another alternative would be to declare the default object as a const outside of the function. This would lead to the same object reference being used each render

bapafes482 · Accepted Answer · 2020-01-07 21:28:42Z

4

It happens because useEffect uses shallow comparison. You can either destructure the object

const {param1, param2} = editing;
useEffect(() => {
//logic goes here
}, [param1, param2]);

Or write a custom hook that uses Lodash isEqual for example

answered Jan 7, 2020 at 21:28

bapafes482

5506 silver badges20 bronze badges

Collectives™ on Stack Overflow

React useEffect with property as dependency makes infinite loop

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related