title: Use component function in React loop
body: <p>I heard that () is not good at the rendering performance so it should not be used. However, in this case, it can not get the results when passing the function without (). </p>
  
  <p>You can check the reseult in CodeSendbox: <a href="https://codesandbox.io/embed/modern-silence-u1sft?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">Link</a></p>
  
  <pre><code>const comp = () =&gt; {
    return &lt;div&gt;This is Component&lt;/div&gt;;
  };
  
  const elements = [comp(), comp];  // Please Attention This Line!
  const items = [];
  
  for (const [index, value] of elements.entries()) {
    items.push(
      &lt;div&gt;
        {index}: {value} &lt;br /&gt;
      &lt;/div&gt;
    );
  }
  
  export default function Index() {
    return &lt;&gt;{items}&lt;/&gt;;
  }
  </code></pre>
  
  <p>Result is:</p>
  
  <pre><code>0:
  This is Component
  
  1: 
  
  </code></pre>
  
  <p>Why only <code>comp()</code> but not <code>comp</code>? What is the best practice in this case?</p>