What is the difference between mapping inside the return statement or outside of it then adding the mapped array to the component return statement? Is there a performance gain or just for organizing?

const Component ()=>  {
   const itmes = arr.map((el)=> {
      return <div>el.item</div>
   })
   return 
   <div>
      {items}
   </div>
}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Just for organizing. The code being executed is the exact same.

There is (an extremely) marginal gain in doing it directly in the return statement: you save on variable (items) declaration, but please do not worry about that, your code won't benefit from this.