Как правильно перерисовывать данные?

Question

[darktowerk56c]

Всем привет. Подскажите, пожалуйста, как решить следующую задачу:
Происходит запрос к серверу, в ответе приходят данные:

const users = [
    {
      id: 73334,
      firstName: "Дмитрий",
      type: 1,
      userNumber: "1122334455667"
    },
    {
      id: 83334,
      firstName: "Михаил",
      type: 2,
      userNumber: "1122334455667"
    },
    {
      id: 93334,
      firstName: "Илья",
      type: 1,
      userNumber: "1122334455667"
    },
    {
      id: 53334,
      firstName: "Николай",
      type: 2,
      userNumber: "1122334455667"
    }
]

Следующим образом я эти данные вывел на страницу:

export const getUserTemplate = (user) => {
  return `
      <tr class="users__row">
        <td class="users__cell">
            ${user.firstName}
        </td>
        <td class="users__cell}">
            ${user.type}
        </td>
        <td class="users__cell">
            ${user.userNumber}
        </td>
        <td class="users__cell">
            <button
                class="users__button-edit"
                type="button"
                data-users-ref="edit"
                data-users-options=${user.id}
            />
                Редактировать
            </button>
        </td>
        <td class="users__cell">
            <button
                class="users__button-delete"
                type="button"
                data-users-ref="delete"
                data-users-options=${user.id}
            >
                Удалить
            </button>
        </td>
      </tr>
  `;
};

export default class Users {
  constructor(el) {
    this.el = el;

    this.usersTbody = this.el.querySelector('[data-users-ref="users-tbody"]');

    this.init();
  }

  render = (users) => {
    this.usersTbody.innerHTML = '';

    for (let i = 0; i < users.length; i++) {
      this.usersTbody.innerHTML += getUserTemplate(users[i]); // в this.usersTbody некий контейнер
    }
  }
}

Затем при, например, удалении (фактически любом действии) пользователя, я получаю вот такую структуру:

const users = [
    {
      id: 73334,
      firstName: "Дмитрий",
      type: 1,
      userNumber: "1122334455667"
    },
    {
      id: 83334,
      firstName: "Михаил",
      type: 2,
      userNumber: "1122334455667"
    },
    {
      id: 93334,
      firstName: "Илья",
      type: 1,
      userNumber: "1122334455667"
    }
]

И вызываю снова метод render

render = (users) => {
  this.usersTbody.innerHTML = '';

  for (let i = 0; i < users.length; i++) {
    this.usersTbody.innerHTML += getUserTemplate(users[i]); // в this.usersTbody некий контейнер
  }
}

Подскажите, пожалуйста, в данном случае я сначала затираю контейнер, а затем перерисовываю.
Как мне сделать, чтобы я изменял только тот элемент, на который я повлиял?

Answer 1

[Антон Швец]

https://habr.com/ru/post/348378/

А если проще, то в случае если id уникальны делаешь `<tr class="users__row" data-id="${user.id}">`
Сравниваешь два массива, исходный и с удалением, находишь удаленные айди и выпиливаешь нужные ноды.