Почему React.StrictMode ломает приложение?

Question

[Dmitry]

Обычное todo приложение. Есть функция, которая при клике ставит метку completedэлементу из списка:

const toggleHandler = (id) => {
    setTodos(prevState => {
        return prevState.map(todo => { // проблема тут
            if (todo.id === id) todo.completed = !todo.completed
            return todo
        })
    })
}

Проблема в том, что в строгом режиме setTodos вызывается дважды, проставляя сперва completed: true и затем completed: false и с виду выглядит будто ничего не происходит.
В качестве решения можно отказаться от колбэка и обновлять state через spread.
Но как исправить эту проблему используя колбэк с предыдущим состоянием и не выключая строгий режим?

Answer 1

[i1yas]

Внутри map делать вот такое

if (todo.id === id) todo.completed = !todo.completed
return todo

Действительно, что могло пойти не так.

Strict Mode, в частности:

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following methods:

...
setState updater functions (the first argument)
...

Вот это выражение:

if (todo.id === id) todo.completed = !todo.completed

это сайд-эффект.

Должно быть:

if (todo.id === id) return { ...todo, completed: !todo.completed }

Comments

[Dmitry]

хм, действительно, это помогло, спасибо большое. Только не могли бы вы объяснить почему эта запись

if (todo.id === id) todo.completed = !todo.completed

является побочным эффектом? mapведь возвращает новый массив и по идеи я модифицировал копию, а не оригинальный state
UPD: кажется понял, todoвнутри mapссылается на изначальный state, т.к объекты это ссылочный тип

[i1yas]

Dmitry, да, так и есть. map создает новый массив, но что будет внутри, зависит от колбека. В вашем случае измененный todo оставался тем же объектом.