React Component рендерит дважды

Question

Я понятия не имею, почему, первый рендер показывает пустой объект, а второй показывает мои данные:

function RecipeList(props) {
    return (
        <div>
            {console.log(props.recipes)}
            {/*{props.recipes.hits.map(r => (*/}
            {/*    <Recipe initial="lb" title={r.recipe.label} date={'1 Hour Ago'}/>*/}
        </div>
    )
}

const RECIPES_URL = 'http://cors-anywhere.herokuapp.com/http://test-es.edamam.com/search?i?app_id=426&q=chicken&to=10'
export default function App() {
  const classes = useStyles();
  const [data, setData] = useState({});

    useEffect(() => {
        axios.get(RECIPES_URL)
            .then(res => {
                setData(res.data);
            })
            .catch(err => {
                console.log(err)
            })
    }, []);
  return (
    <div className={classes.root}>
      <NavBar/>
      <RecipeList recipes={data}/>
      <Footer/>
    </div>
  );
}

Я не знаю почему, и я боролся здесь более часа (React newb ie), поэтому я должен что-то упустить.

Answer 1

Это ожидаемое поведение. Причина, по которой вы видите два консольных журнала, заключается в том, что первый раз RecipeList вызывается без данных (пустой объект) и второй раз, когда данные становятся доступными. Если вы хотите отобразить его только при наличии данных, вы можете сделать что-то вроде {Object.keys(data).length > 0 && <RecipeList recipes={data}/>}. Кстати это называется условный рендеринг.

Answer 2

Это совершенно нормально, React сначала отрендерит ваш компонент без данных. Затем, когда ваш axios.get вернется и обновит данные, он будет снова отображен с новыми данными