title: How to avoid recursive dependencies in useEffect hook
body: <p>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 <code>items</code>, the effect is called again with the new <code>items</code> list, and another item is added.</p>
  
  <pre><code>export default function UnintentionallyRecursive () {
    const [item, setItem] = useState()
    const [items, setItems] = useState([])
  
    const fetchItem = () =&gt; new Promise(resolve =&gt; resolve({ title: 'a new item' }))
  
    const updateItem = useCallback(async () =&gt; {
      const newItem = await fetchItem()
      setItem(newItem)
    }, [setItem])
  
    useEffect(() =&gt; {
      updateItem()
    }, [updateItem])
  
    // this is the part that causes the recursion
    useEffect(() =&gt; {
      setItems(items.concat([item]))
    }, [item, items, setItems])
  
    return null // really UI code which can also call updateItem
  }
  </code></pre>
  
  <p>How can I achieve this using Hooks?</p>