How to avoid recursive dependencies in useEffect hook

Question

I have a component which maintains a list of items that are fetched over time. The component fetches an item on load, and can also fetch new items as a result of user interaction. Whenever an item is fetched it should be added to the list of items. The following code goes into an infinite recursion, because each time I add a new item to items, the effect is called again with the new items list, and another item is added.

export default function UnintentionallyRecursive () {
  const [item, setItem] = useState()
  const [items, setItems] = useState([])

  const fetchItem = () => new Promise(resolve => resolve({ title: 'a new item' }))

  const updateItem = useCallback(async () => {
    const newItem = await fetchItem()
    setItem(newItem)
  }, [setItem])

  useEffect(() => {
    updateItem()
  }, [updateItem])

  // this is the part that causes the recursion
  useEffect(() => {
    setItems(items.concat([item]))
  }, [item, items, setItems])

  return null // really UI code which can also call updateItem
}

How can I achieve this using Hooks?

Luuuud · Accepted Answer · 2019-12-02 23:47:13Z

4

You can update a state using a function with its current state as argument. This way you don't need items as a dependency.

setItems((currentState) => currentState.concat(item));

// is the same as
setItems([items].concat(item));

Sidenote: You also don't need to add setItems to your dependency array, it's save to leave out.

edited Dec 2, 2019 at 23:47

answered Dec 2, 2019 at 23:44

Luuuud

4,4792 gold badges27 silver badges34 bronze badges

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

1 Comment

jonesjones Over a year ago

beat me to it by 30 seconds :)

jonesjones · Accepted Answer · 2019-12-02 23:45:23Z

1

TIL about functional updates in useState

replacing the offending useEffect call with this fixed the issue

  useEffect(() => {
    setItems(items => items.concat([item]))
  }, [item, setItems])

answered Dec 2, 2019 at 23:45

jonesjones

4971 gold badge6 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to avoid recursive dependencies in useEffect hook

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related