title: Why does this component render twice in react?
body: <p>I have a component, I set a count and let state update when button clicked.
  But when I check render times, it renders twice each time I click the button.</p>
  <p><a href="https://codesandbox.io/s/brave-forest-yre6y?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/brave-forest-yre6y?file=/src/App.js</a></p>
  <pre><code>export default function App() {
    const cute = Array(10).fill({});
    const [count, setCount] = useState(2);
    console.log(count);
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;button
          onClick={() =&gt; {
            if (count &lt; 10) setCount(count + 1);
          }}
        &gt;
          add
        &lt;/button&gt;
        {cute.map((data, index) =&gt; {
          if (index &lt; count) {
            return (
              &lt;div&gt;
                &lt;p&gt;{index}. Luna is cute&lt;/p&gt;
              &lt;/div&gt;
            );
          }
        })}
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>I wonder:</p>
  <ol>
  <li>Why does it work like this?</li>
  <li>How could I prevent this?</li>
  </ol>