Huge difference in terms of container mount between creating component abstraction and creating normal div in the container.

[BlaiseTiong1030]

Comparison between looping 1000 component in Parent vs 1000 abstracted components in parent in React and Vue**

Vue example

// ./components/Wrapper.vue
<template>
  <div>
    <slot />
  </div>
</template>

// App.vue
<script setup>
import { ref } from "vue";
import Wrapper from "./components/Wrapper.vue";
const isRender = ref(false);
</script>

<template>
  <button @click="isRender = true">Click to render</button>
  <template v-if="isRender" v-for="item in 1000" :key="item">
	  // With wrapper
	  <Wrapper>Item here</Wrapper>
	  // Without wrapper
    <div>Item here</div>
  </template>
</template>

<style scoped></style>

Without wrapper component

With wrapper component

React example

function Div({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>;
}

function Main() {
  const [render, isRender] = useState(false);
  return (
    <div>
      <button onClick={() => isRender(true)}>Click to render</button>
      {render &&
        generateArray(1000).map((key) => (
        	  // With wrapper
	          <Div key={key}>{"Item here"}</Div>
					  // Without wrapper
				    <div>Item here</div>
        ))}
    </div>
  );
}

Without wrapper component

With wrapper component

[BlaiseTiong1030]

Hi any updates ?

@LinusBorg