Vue3,when i use component in DynamicScrollerItem, the component will rerender after it go back on-screen.How can i avoid duplicate rendering?

[mazili]

trafficstars

It's in vue3. Here is my code.

 <DynamicScroller
    :items="chat.data"
    :min-item-size="65"
    key-field="id"
    class="chat-wrapper"
    id="chat-wrapper"
    @buffer="200">
    <template v-slot="{item, index, active}">
      <DynamicScrollerItem :item="item" :active="active" :data-index="index" :sizeDependencies="[item.message, item.cf]">
          <keep-alive>
              <component :is="item?.cf?.name" v-bind="item?.cf?.props"> 
    </component>
           </keep-alive>
     </DynamicScrollerItem>
</DynamicScroller>

[shalinip9196]

Facing same issue. The component is getting re-rendered when again painted on screen, calling all the lifeCycle hooks. Did you find a work around ?