React UseEffect is being calling twice [duplicate]

Question

I have the following code in FC component:

I just want to call the Api and Log the info when the component is mounted

The console.log is being called twice for empty array and twice for setting the same values.

import * as React from"react";
import Header from"../components/Header";
import Search from"../components/Search";
import Categories from"../components/Categories";
import Carousel from"../components/Carousel";
import CarouselItem from"../components/CarouselItem";
import Footer from"../components/Footer";
import "../assets/styles/App.scss";

const App = () => {
  const [videos, setVideos] = React.useState([]);

  React.useEffect(() => {
    fetch("http://localhost:3000/initalState")
      .then((response) => response.json())
      .then((data) => setVideos(data));
  }, []);

  console.log(videos);
  return (
    <div className="App">
      <Header></Header>
      <Search></Search>

      <Categories title="Mi Lista">
        <Carousel>
          <CarouselItem />
          <CarouselItem />
          <CarouselItem />
          <CarouselItem />
          <CarouselItem />
        </Carousel>
      </Categories>

      <Categories title="Tendencias">
        <Carousel>
          <CarouselItem />
          <CarouselItem />
        </Carousel>
      </Categories>

      <Categories title="Originales de Platzi Video">
        <Carousel>
          <CarouselItem />
        </Carousel>
      </Categories>

      <Footer />
    </div>
  );
};

export default App;

However, i got the following output:

Calling within useEffect:

  React.useEffect(() => {
    fetch("http://localhost:3000/initalState")
      .then((response) => response.json())
      .then((data) => {
        setVideos(data);
        console.log(videos);
      });
  }, []);

returns an empty array.

you are printing it outside. Try printing it within the useEffect callback. — Amit Joki
– Amit Joki, Commented May 10, 2020 at 2:32
Also verify there is only one <App/> component being mounted. Probably is but clearing the obvious first helps — charlietfl
– charlietfl, Commented May 10, 2020 at 2:34
@AmitJoki i just updated this post for printing inside useEffect callback, gives me an empty array. — Juan Bonoso
– Juan Bonoso, Commented May 10, 2020 at 2:54

Nick Vu · Accepted Answer · 2022-04-28 16:51:43Z

50

I just realized I was rendering App in strict Mode, which invokes some events twice:

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

Class component constructor, render, and shouldComponentUpdate methods Class component static getDerivedStateFromProps method Function component bodies State updater functions (the first argument to setState) Functions passed to useState, useMemo, or useReducer

I had this:

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

Now

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

It's solved.

edited Apr 28, 2022 at 16:51

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

answered May 10, 2020 at 18:45

Juan Bonoso

7621 gold badge5 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Igor William Over a year ago

you helpme very much

Youssouf Oumar Over a year ago

Removing StrictMode should be the last choice. For a more detailed answer, you may visit stackoverflow.com/questions/72238175/….

upog · Accepted Answer · 2020-05-10 03:58:37Z

2

you can use UseCallback to avoid an additional run below is the sample code.

Note: If you directly call setTimeout/server calls inside use effect without wrapping in useCallback , it will be called twice

const App = () => {
  const [myData, setMyData] = React.useState([]);


  const getData = useCallback ( () => { 
    setTimeout(() => {
      console.log("Inside setTimeOut");
      setMyData("HEllo");
    }, 2000);

  }, [] )

  useEffect(() => {
    getData()
     console.log("Inside UseEffect",myData);
   },[getData]);


  return (
    <div className="App">
     Inside my App {myData}
    </div>
  );
}

export default App;

Output:

Inside UseEffect  [printed just once]

edited May 10, 2020 at 3:58

answered May 10, 2020 at 3:23

upog

5,6268 gold badges57 silver badges87 bronze badges

4 Comments

Juan Bonoso Over a year ago

I understand. Should i use console.logs outside the useEffect hooks? Same level as useEffect, return and getData?

upog Over a year ago

Nope. Then it will have more cycles , as getdata will have new data which will render again and prints log again. By wrapping i useEffect and adding dependency it will not run unless dependency changes

Shan Biswas Over a year ago

I have removed all the myData dependencies and kept the other console prints. It prints Inside UseEffect twice

Yogi Over a year ago

You're a genius!

Collectives™ on Stack Overflow

React UseEffect is being calling twice [duplicate]

2 Answers 2

2 Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Linked

Related