Почему create-реакции-приложение инициализируется дважды?

Question

Я инициализировал приложение реакции, используя npx create-react-app:

import React from 'react';

class Expensive {
  constructor() {
    console.log('constructing expensive class');
  }
}

function App() {
  const expensiveRef = React.useRef(new Expensive());
  return (
    <div className="App">
      app
    </div>
  );
}

export default App;

Однако я вижу, что constructing expensive class выводится на консоль дважды. Почему это так?

Я получаю тот же результат, если заменить

const expensiveRef = React.useRef(new Expensive());

на

const [expensiveState, setExpensiveState] = React.useState(new Expensive());

Answer 1

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

Если вы хотите, чтобы он был инициализирован только один раз, используйте эту версию useState, такую ​​как

const [expensiveState, setExpensiveState] = React.useState(() => new Expensive());

Таким образом, вы передаете функцию вместо инициализации объекта

см. https://reactjs.org/docs/hooks-reference.html#lazy -initial-state