Почему компонент с React.useState() рендерится два раза?

Question

[Алексей Алексеев]

Такой код выведет в консоль "App" один раз.

import React from "react";
export default function App() {
  console.log('App');
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

А такой два раза

import React from "react";
export default function App() {
  console.log('App');
  const [foo, setFoo] = React.useState(1);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Добавилась одна строчка
const [foo, setFoo] = React.useState(1);

Comments

[Макс]

это только в CodeSandbox воспроизводится? Локально пробовали воспроизвести?

Я с таким сталкивался. Оказалось что какие-то преколы CodeSandbox

[Алексей Алексеев]

Пробовал локально, то один раз, то два раза выводит. Так же в песочнице, то один, то два раза.
В теории в консоль должно вывестись один раз...

[paoluccio]

Алексей Алексеев, удалите React.StrictMode в index.js.

[Алексей Алексеев]

paoluccio, Однако, а почему так происходит? Спасибо.

[paoluccio]

Алексей Алексеев, здесь очень хорошо объясняется.