Почему мой create-response-app console.log дважды?

Question

Я просто делаю простое приложение для извлечения рецептов, используя настройку create-реагировать на приложение, но когда я пытался записать ответ, он регистрировал его дважды. Я пошел назад и удалил код, пока он не перестал происходить и по какой-либо причине он запускается, когда я использую хук состояния:

import React, { useState } from 'react';
import './App.css';


function App() {
  const APP_ID = '092fa53f';
  const APP_KEY = '6fcf8c591c129cc3d01aefbda0d8a4d8';
  const recipe_url = `https://api.edamam.com/search?q=chicken&app_id=${APP_ID}&app_key=${APP_KEY}`;

  const [recipes, setRecipes] = useState(0);

  return (
    <div className="App">
      {console.log('test')}
    </div>
  );
}

export default App;

Answer 1

Это специально, это часть React.StrictMode (в частности, обнаружение неожиданных побочных эффектов ):

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

• Компонент класса constructor, render и shouldComponentUpdate Методы
• Компонент класса stati c getDerivedStateFromProps method
• Тела компонентов функций
• Функции средства обновления состояния (первый аргумент setState)
• Функции, переданные useState, useMemo или useReducer

Если вы удалите элемент StrictMode из index.js, вы увидите, что выход регистрируется только один раз:

ReactDOM.render(<App />, document.getElementById('root'));

Обратите внимание, что в строгом режиме это происходит только в разработке , а не в производстве.