Есть ли какая-то причина, по которой ловушка реагирования установила обратный вызов дважды?

Question

У меня есть такой простой код:

const [state, setState] = useState([]);

useEffect(() => {
  socket.on('something', data => {
    console.log('ONE');

    setState(old => {
      console.log('TWO');

      const newArr = [...old];

      // do something to newArr
      return newArr;
    });
  });

  return () => {
    socket.off('something');
  };
}, []);

Все работает, как задумано, но по какой-то причине обратный вызов something срабатывает один раз (ONE печатается один раз), но внутри, когда я устанавливаю состояние обратный вызов setState вызывается дважды (дважды TWO). Почему это так?

Answer 1

Это особенность строгого режима React (нет, это не ошибка).

Функция обновления setState(), среди других методов , вызывается дважды в строгом контексте в режиме разработки только для быстрого выявления общих антипаттернов, в том числе мутаций состояния и состояния, управляемого извне. ожидается, что эти методы будут регулярно вызываться несколько раз для каждого рендера, поскольку внутренняя реализация фазы рендеринга реагирования усложняется.

Короче говоря, ничего не нужно исправлять. React просто упрощает обнаружение ошибок логики c в разработке, сохраняя при этом производительность в работе.