useEffect infinite loop when updating state and including dependency array

Question

I always find this a bit weird with React that it is said to be an anti-pattern to not add all dependencies to the useEffect hook and warnings are shown in the console.

Take this example. I am using swr and useSWRInfinite - see example here and docs here.

My code looks checks that a element is inView and if so it fetches the next page of data.

This all works fine

useEffect(() => {
    if (inView) {
      setSize(size + 1)
    }
}, [inView, setSize])

but if I add size to the dependency array an infinite loop occurs as I am updating the size within useEffect

useEffect(() => {
  if (inView) {
    setSize(size + 1)
  }
}, [inView, setSize, size]) <------ everything breaks

Can anyone advise on the correct way of handling this. After reading through many SO answers and blog posts nothing is any clearer.

don't put setSize in the dependency array. it's already guaranteed to be constant. — Mulan
– Mulan, Commented Feb 15, 2023 at 1:23

vighnesh153 · Accepted Answer · 2023-02-15 01:19:43Z

4

You have added size in the dependency array. So, the useEffect will run whenever size changes. Now, in your useEffect, you are incrementing size using the setSize setter. This will again cause size to change and again run the useEffect.

If you want to refer to the previous size, you can use the callback version of the setSize.

setSize((previousSize) => previousSize + 1)

This way, your linter won't complain when you don't add size in the dependency array because now you are not using it.

edited Feb 15, 2023 at 1:19

answered Dec 29, 2022 at 16:48

vighnesh153

5,5103 gold badges26 silver badges46 bronze badges

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

Comments

Simcha · Accepted Answer · 2022-12-29 16:48:38Z

0

You aren't supposed to use the size state inside the setSize. You can change it to setSize(size => size + 1) And then remove the size from the dependency array. Can read more here: enter link description here

answered Dec 29, 2022 at 16:48

Simcha

363 bronze badges

Collectives™ on Stack Overflow

useEffect infinite loop when updating state and including dependency array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related