title: Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect
body: <pre><code>Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
  </code></pre>
  
  <p>Can I ignore the title error? I have a component that once triggered runs 200 simulations, each time updating a count of the sims and assigning the winner to a keyed array.</p>
  
  <p>However I presume because setCount is called in the useEffect that also checks the value, its reaching a depth.</p>
  
  <pre class="lang-js prettyprint-override"><code>export default function Battle({ items, max = 200, }) {
    const bout = useBout()
    const brands = useSelector(state =&gt; groupBy(state.brands, "id"))
    const [ started, setStarted, ] = useState(true)
    const [ count, setCount, ] = useState(0)
    const [ simulations, setSimulations, ] = useState({})
  
    const teams = groupBy(bout.items, "teamId")
    const segments = useMemo(() =&gt; {
      return generateSegments({ teams, brands, simulations, count })
    }, [teams, brands, simulations, count ])
  
    useEffect(() =&gt; {
      if (items) {
        bout.load(items)
      }
    }, [ items, ])
  
    useEffect(() =&gt; {
      if (started &amp;&amp; count &lt;= max) {
        bout.simulate()
        const id = bout.items.find(item =&gt; item.winner)?.teamId
  
        setCount(count + 1)
        setWinner(id)
      }
    }, [ count, max, started, ])
  
    const onStart = () =&gt; {
      track("BATTLE_CLICK")
      setCount(0)
      setSimulations([])
      setStarted(true)
    }
  
    const setWinner = (id) =&gt; {
      const value = simulations[id] ? Number(simulations[id]) + 1 : 1
  
      setSimulations({ ...simulations, [id]: value, })
    }
  
    return &lt;Segments segments={segments} onItemClick={onStart} /&gt;
  }
  </code></pre>