Найти и исправить ошибки в компоненте

Задача

Найти и исправить ошибки в компоненте. Он показывает список задач, позволяет добавлять новые и фильтровать выполненные.

function TodoList({ todos }) {
    const [items, setItems] = useState(todos);
    const [text, setText] = useState('');
 
    // добавить задачу
    const addTodo = () => {
        items.push({ id: Date.now(), title: text, done: false });
        setItems(items);
        setText('');
    };
 
    // переключить выполнение
    const toggle = (i) => {
        items[i].done = !items[i].done;
        setItems(items);
    };
 
    const visible = items.filter((t) => !t.done);
 
    const stats = () => {
        return { total: items.length, left: visible.length };
    };
 
    return (
        <div>
            <input value={text} onChange={(e) => setText(e.target.value)} />
            <button onClick={addTodo}>Add</button>
 
            <p>Left: {stats().left} / {stats().total}</p>
 
            {visible.map((todo, i) => (
                <div key={i} onClick={() => toggle(i)}>
                    {todo.title}
                </div>
            ))}
        </div>
    );
}

Подсказка

Обратите внимание на: мутацию state вместо иммутабельного обновления, key={i} по индексу, индекс как идентификатор в toggle, лишние пересчёты и пересоздания функций.

Разбор ошибок

Что сломано

1. Мутация state в addTodo. items.push(...) меняет тот же массив, а setItems(items) получает ту же ссылку — React не увидит изменения и не перерендерит.
2. Мутация state в toggle. items[i].done = ... — та же проблема со ссылкой.
3. key={i} по индексу. При фильтрации/удалении индексы сдвигаются, React путает элементы — теряется состояние и ломается анимация. Нужен стабильный todo.id.
4. toggle(i) по индексу отфильтрованного массива. i — индекс в visible, а мутируется items[i] — это другой элемент. Переключать нужно по id.
5. stats() вызывается дважды за рендер и пересоздаётся каждый раз — лишняя работа. Выносится в useMemo.
6. addTodo/toggle пересоздаются на каждый рендер — если их прокидывать в мемоизированные дочерние компоненты, те будут перерендериваться зря. Оборачиваются в useCallback.

Решение

Исправленный компонент

function TodoList({ todos }) {
    const [items, setItems] = useState(todos);
    const [text, setText] = useState('');
 
    // иммутабельно: новый массив + функциональный апдейт
    const addTodo = useCallback(() => {
        const title = text.trim();
        if (!title) return;
 
        setItems((prev) => [
            ...prev,
            { id: Date.now(), title, done: false },
        ]);
        setText('');
    }, [text]);
 
    // переключаем по id, возвращаем новый массив
    const toggle = useCallback((id) => {
        setItems((prev) =>
            prev.map((t) =>
                t.id === id ? { ...t, done: !t.done } : t
            )
        );
    }, []);
 
    // мемоизируем производные данные
    const visible = useMemo(
        () => items.filter((t) => !t.done),
        [items]
    );
 
    const stats = useMemo(
        () => ({ total: items.length, left: visible.length }),
        [items, visible]
    );
 
    return (
        <div>
            <input value={text} onChange={(e) => setText(e.target.value)} />
            <button onClick={addTodo}>Add</button>
 
            <p>Left: {stats.left} / {stats.total}</p>
 
            {visible.map((todo) => (
                <div key={todo.id} onClick={() => toggle(todo.id)}>
                    {todo.title}
                </div>
            ))}
        </div>
    );
}

Ключевые принципы

• State в React иммутабелен: всегда создавайте новый объект/массив (map, filter, spread), не мутируйте существующий.
• Для зависимых от предыдущего значения апдейтов используйте функциональную форму setItems(prev => ...).
• key должен быть стабильным и уникальным (id), не индексом.
• useMemo — для дорогих вычислений и производных данных, useCallback — для стабильных ссылок на функции, передаваемые вниз.