Здесь в этом примере я просто вызываю useState с функцией инициализатора:

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [data, setData] = useState(() => {
    console.log('Getting initial state...');

    return {};
  });

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Как видно из консоли, функция useState вызывается дважды. Есть ли причина для этого, это нормальное поведение?

0
gremo 6 Сен 2020 в 12:16

1 ответ

Лучший ответ

Это вызвано тем, что Strict Mode упаковывает ваш App.

В строгом режиме реагирование намеренно дважды запускает некоторые методы жизненного цикла, чтобы помочь обнаружить ошибки.

Из документов:

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

Методы конструктора, рендеринга и shouldComponentUpdate компонента класса. Статический метод компонента класса. GetDerivedStateFromProps. Тела компонента функции. Функции средства обновления состояния (первый аргумент для setState).

Примечание. Это относится только к режиму разработки. Жизненные циклы не будут запускаться дважды в производственном режиме.

3
thedude 6 Сен 2020 в 09:29