React JS. Почему fetch() делает два запроса?

Question

[Адлан]

function App() {
  fetch("https://...mockapi.io/items")
    .then((res) => {
      return res.json();
    })
    .then((json) => {
      console.log(json);
    });
}

index React'а выглядит так:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Answer 1

[Alexandroppolus]

App рендерится дважды из-за React.StrictMode.

Но вообще, делать вот так запросы противопоказано. Делай в useEffect

Comments

[Адлан]

А можно узнать, почему делать запросы подобным образом — не гуд?

[Evgeniy S]

Адлан, если данные компонента или зависимых компонентов изменятся, функция вызовется снова чтобы отрендерить твой компонент. а у тебя там фетч висит :(

Answer 2

[Надим]

Потому что ты вызываешь функцию App() два раза подряд, ищи ошибку.

Comments

[Адлан]

Привет, я тоже думал про это, но на второй вызов() так и не наткнулся(