> Как удалить последний элемент массива в setState без мутаций в React? (React, TypeScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Black Wall Group (BWG)

Стек: React, TypeScript

> Пример ответа

Чтобы удалить последний элемент массива в setState без мутаций, используйте метод slice или spread-оператор в комбинации с filter. Вот пример на TypeScript:

TSX
interface Item {
  id: number;
  name: string;
}

const [items, setItems] = useState<Item[]>([...]);

// Вариант 1: slice
const removeLast = () => {
  setItems(prev => prev.slice(0, -1));
};

// Вариант 2: filter (более гибкий, если нужно удалить по условию)
const removeLast = () => {
  setItems(prev => prev.filter((_, index) => index !== prev.length - 1));
};

// Вариант 3: spread + pop (не рекомендуется, так как pop мутирует копию)
const removeLast = () => {
  const copy = [...items];
  copy.pop();
  setItems(copy);
};

Лучший подход - slice(0, -1), так как он создаёт новый массив без изменения исходного, что соответствует принципам иммутабельности в React. Всегда используйте функциональную форму setState (prev => ...) для избежания проблем с устаревшими данными.