Надо давать элементам списка уникальный ключ –
атрибут key
.
Так React поймёт, какие элементы удалены, добавлены.
Индекс массива не подходит для значения
key
. Нужно что-то уникальное, характерное для каждого элемента массива, что не изменится при изменении порядка, скажем.
В примере в вопросе, видимо, уникальны сами значения 1, 2, 3 – можно их использовать для атрибута key:
arr.map(el => <TimerComponent name={el} key={el} />)
Ну и
массивы в стейте, помните, надо не мутировать, а заменять массив целиком на новый.
Чтобы не перерендерился каждый раз вложенный компонент, можно его «мемоизировать»: обернуть в
React.memo(), снабдив функцией, которая сравнивает предыдущее состояние и новое, и делает вывод, надо ли перерендерить. Тут, например, не надо перерендерить, если N остался тот же. Упрощённый Codepen:
для сравнения в коде App закомментируйте-раскомментируйте соседние строки, чтобы вместо ItemMemo работал просто Item