title: Setting state inside useEffect is breaking my data structure?
body: <p>I tried to set state in my useEffect hook but it returned an infinitely nested object instead of a flat collection: </p>
  
  <pre><code>  const [items, setItems] = useState([]);
    useEffect(() =&gt; {
      if (loading || error) return;
      let { items } = data;
      items = items.map(r =&gt; ({
        ...r,
        questionData: JSON.parse(r.data),
        updatedAt: format(new Date(`${r.updatedAt}.000Z`), 'yyyy-MM-dd')
      }));
  
      setItems(items);
    }, [loading, error, data]);
  </code></pre>
  
  <p>Expecting this: </p>
  
  <p><a href="https://i.stack.imgur.com/oQmZV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oQmZV.png" alt="enter image description here"></a></p>
  
  <p>but got this instead: </p>
  
  <p><a href="https://i.stack.imgur.com/AsOgy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AsOgy.png" alt="enter image description here"></a></p>