Как добавить новый элемент li в список React с иммутабельным обновлением массива

При разработке на React часто возникает задача динамически добавлять элементы в список. В этой статье мы разберём корректный способ обновления состояния массива через useState с соблюдением принципа иммутабельности. На примере компонента ImmutabelArr вы увидите, как при нажатии кнопки новый li появляется и в массиве, и в интерфейсе.

Проблема: прямое мутирование массива

Начинающие разработчики часто пытаются изменить массив напрямую, например, через push(). Это нарушает иммутабельность состояния React и приводит к тому, что UI не перерисовывается. Правильный подход - создать копию массива и передать её в setNotes.

Решение: иммутабельное обновление через spread-оператор

В компоненте ImmutabelArr используется функция addLi, которая:

• Создаёт копию массива [...notes]
• Добавляет новый элемент (например, notes.length + 1)
• Вызывает setNotes(copy)

Это гарантирует, что React обнаружит изменение ссылки на массив и перерендерит компонент.

Полный пример компонента

function ImmutabelArr() {
  let [notes, setNotes] = useState([1,2,3,4,5]);

  let result = notes.map((note, index) => {
    return <li key={index}>{note}</li>;
  });

  function addLi(notes) {
    let copy = [...notes, notes.length + 1];
    setNotes(copy);
  }

  return (
    <div>
      <ul>{result}</ul>
      <button onClick={() => addLi(notes)}>add li</button>
    </div>
  );
}

Ключевые моменты для SEO и разработки

• Иммутабельность - основа работы с состоянием в React. Всегда создавайте новый массив, а не модифицируйте старый.
• Ключи (key) - используйте уникальные и стабильные ключи для элементов списка. В примере используется index, но для динамических списков лучше применять уникальный ID.
• Spread-оператор - простой способ копирования массива. Альтернативы: concat(), slice() или Array.from().

Частые ошибки при добавлении элементов в список React

Использование push()

notes.push(6) мутирует исходный массив. React не увидит изменений, так как ссылка на объект осталась той же.

Игнорирование ключей

Если не указать key, React будет использовать индекс, что может вызвать проблемы с производительностью и состоянием при удалении/перестановке элементов.

Обновление состояния в цикле

Избегайте вызова setNotes внутри map() или других итераций - это может привести к бесконечному циклу.

Заключение

Добавление нового элемента li в список React - тривиальная задача, если соблюдать правило иммутабельности. Используйте spread-оператор для копирования массива, передавайте копию в setNotes и не забывайте про ключи. Теперь вы можете легко реализовать динамическое добавление записей в любой компонент.