Как происходит render в данном компоненте?

Question

[Vann Damm]

В данном компоненте, отрисовывается 3 элемента в классе wrapper. Количество элементов зависит от maxCount. В первом случае maxCount = 3 , далее пользователь нажал кнопку и maxCount стал 5. Правильно ли я понимаю что VirtualDOM сверяет предыдущие элементы для отрисовки когда maxCount был 3 , с нынешним элементами при maxCount = 5 , и если он понимает что новые только 2 элемента , он только их и перересовывет?!

<div ref={wrapperRef} className="wrapper">
      {products.slice(0, maxCount).map((obj: IProductProps, index: number) => (
        <Product key={index} {...obj} />
      ))}
    </div>

Answer 1

[hzzzzl]

по новому ключу key={index}, собственно поэтому этот key надо всегда добавлять, когда элементы рендеришь из массива

.... это отсюда? :)
https://www.youtube.com/watch?v=yGIjvWBVu5Q

Comments

[Vann Damm]

Точно... уже забыл. Спасибо !
Да, отсюда)