Реагируйте визуально дважды с помощью крючков

Question

почему мой компонент рендерит дважды?

export default function App() {
  console.log("asd");
  const [count, setCount] = useState(0);
  return (
    <div>
      <Title count={count} />
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      />
    </div>
  );
}


//console= "asd" "asd"

его рендеринг два раза, но если я уберу useState, это не произойдет

Answer 1

Ваше приложение может быть упаковано в React.StrictMode. StrictMode - это инструмент для выделения потенциальных проблем в приложении.

В настоящее время StrictMode помогает:

Идентификация компонентов с небезопасными жизненными циклами

Предупреждение об использовании устаревшей строки ref API

Предупреждение об устаревшем использовании findDOMNode

Обнаружение неожиданных побочных эффектов

Обнаружение устаревшего контекстного API

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

Конструктор компонента класса, методы рендеринга и shouldComponentUpdate

Компонент класса stati c Метод getDerivedStateFromProps

Тела функциональных компонентов (ваше приложение является функциональным компонентом)

Функции средства обновления состояния (первый аргумент для setState)

Функции, передаваемые для useState, useMemo или useReducer

Подробнее