Почему useState setState при помощи prevstate вызывается несколько раз?

Question

[kokapuk]

const [todos, setTodos] = useState<ITodo[]>([])
const toggleHandler = (id: number) => 
  {
    console.log("toggle handler")
    setTodos(prev => test("1", Date.now(), false));
  }

const test = (title: string, id: number, completed: boolean):ITodo[] => {
    console.log('test func')

    const newTodo: ITodo = {
      title: title,
      id: id,
      completed: completed
    }

    return [newTodo] 
  }

что выводит мне консоль:
toggle handler
test func
test func

Я только сегодня начал этим заниматься, и даже предположить не могу, почему это работает именно так, помогите пожалуйста

Comments

[Alexandroppolus]

наверняка опять хулиганские проделки реактовского StrictMode.
если так, то выпили его из компонентов, иначе console.log сведет тебя с ума

[kokapuk]

Alexandroppolus, тут проблема не только в логе, тут оно реально вызывается дважды, я слегка упростил вариант, что бы было наглядно, но ранее у меня устанавливалось значение для todo completed в обратно положение, а это completed, было привязано к чекбоксу и он просто не менялся, поскольку это действие выполнялось дважды, false -> true -> false, надеюсь ты понял

[kokapuk]

Alexandroppolus,

setTodos(prev => prev.map(todo => {
      if (todo.id === id) {
        console.log(12)
        todo.completed = !todo.completed;
      }
      
      return todo
    }))

мне из за этого обязательно нужно использовать прев, но оно почему то не работает

[Alexandroppolus]

kokapuk,

setTodos(prev => prev.map(todo => {
      if (todo.id === id) {
        console.log(12);
        return { ...todo, completed: !todo.completed };
      }
      
      return todo;
    }));

вот так должно быть правильно.

[kokapuk]

Alexandroppolus, уже все исправил, написал в ответе ссылаясь на Вас, спасибо огромное

[Kentavr16]

Alexandroppolus, кстати а есть ли смысл в двойном прогоне состояний в строгом режиме? В реальной жизни строгий режим реакта полезен?

[Alexandroppolus]

Kentavr16, вот здесь про эту наркоманию - https://ru.reactjs.org/docs/strict-mode.html

[Alexandroppolus]

Kentavr16, насчет полезности: можно специально проверить работу приложения или каких-то отдельных компонентов в строгом режиме, но держать его включенным постоянно не стоит - будет всякая чертовщина, как у автора вопроса.

Answer 1

[kokapuk]

Я нашел ответ, как сказал Alexandroppolus, нужно выпилить React.StrictMode, но я сначала не понял, о чем идет речь, как оказалось этот стрикт идет с коробки в реакте в файле index.tsx в таком виде:

root.render(
<React.StrictMode>
    <App />
  </React.StrictMode>
);

я же сделал следующее:

root.render(
<App />
);

Спасибо Alexandroppolus!