Updating array with entirely new data does not removed the previous rendered data in stencil component

Question

I have an array with some data, after the pagination event I have updated the array with the next page of the data so it should update the view with a new set of data, though it updates the view the previous set of data still lies in the DOM view, ideally it should clear the previous view and render the new set of data to the DOM

import { Component, Element, h, Listen, Prop, State } from '@stencil/core'

@Component({
  tag: 'test-common-listing',
  styleUrl: 'test-common-listing.scss',
  shadow: true,
})
export class TestCommonListing {
  @Element() el: HTMLElement

  @Prop() name: string
  @Prop() url: string
  @Prop() columns: any

  @State() list: Array<any> = []
  @State() page_number: number = 1
  @State() page_size: number = 5


  @Listen('pageChange')
  pageCanged(page) {
    this.page_number = page.detail
  }
  get filterList() {
    return this.list.slice((this.page_number - 1) * this.page_size, this.page_number * this.page_size)
  }
  async componentWillLoad() {
    console.log('component will load')
    const res = await fetch(this.url)
    const data = await res.json()
    this.list = data
  }
generateElement(item){
      
      let tr = []
      let cell = null
      let span = null
    
      cell = document.createElement('td')
      span = document.createElement('span')
      span.innerText = item['first_name']
      cell.appendChild(span)
      tr.push(cell)
      
      cell = document.createElement('td')
      span = document.createElement('span')
      span.innerText = item['last_name']
      cell.appendChild(span)
      tr.push(cell)
      
      cell = document.createElement('td')
      span = document.createElement('span')
      span.innerText = item['role_display_name']
      cell.appendChild(span)
      tr.push(cell)
      
      cell = document.createElement('td')
      span = document.createElement('span')
      span.innerText = item['avail_status_name']
      cell.appendChild(span)
      tr.push(cell)
      return tr
    }
  render() {
    return (
      <div class="test-common-listing">
        <div class="header">
          <slot name="header" />
        </div>
        <table class="fixed_headers">
          <thead>
            <tr>
              {JSON.parse(this.columns).map(c => <th>{c.label}</th>)}
            </tr>
          </thead>
          <tbody>
            {
              this.filterList.map(l => <tr ref={nodeEle => {
                nodeEle.append(...this.generateElement(l))
              }}> </tr>)
            }
          </tbody>
        </table>
        <div>
          <test-pagination />
        </div>
        <div class="footer">
          <slot name="footer" />
        </div>
      </div>
    )
  }
}

in the table body it renders the updated data with previous set data instead of only new set of data.

Answer 1

Since the element was added manually to the nodeEle has to be removed before updating below codes solves this case.

<tbody>
            {
              this.filterList.map(l => <tr ref={nodeEle => {
                while (nodeEle.hasChildNodes()) {
                  nodeEle.firstChild.remove()
                }
                nodeEle.append(...this.generateElement(l))
              }}> </tr>)
            }
</tbody>