1

Whenever the component renders there are two success messages are shown in the console. Shouldn't it call only once?

  useEffect(() => {
    const fetchWorkouts = async () => {
      const response = await fetch("http://localhost:4000/api/workouts");
      const json = await response.json();

      if (response.ok) {
        console.log("success");
        console.log(json);
        setWorkouts(json);
      }
    };

    fetchWorkouts();
  }, []);

enter image description here

enter image description here

Mahmudul Ahsan
  • 51
  • 1
  • 6

1 Answers1

3

You might have

  <React.StrictMode>
    <App />
  </React.StrictMode>

Or

 <StrictMode>
    <App />
  </StrictMode>

in your index.js in the root folder, just removing it will fix the issue.

You can read more about the StrictMode in react.js here

DreamBold
  • 2,727
  • 1
  • 9
  • 24
  • Removing `StrictMode` is a bad idea. This behavior is not an issue; it's wanted. For a detailed answer, see https://stackoverflow.com/questions/72238175/why-useeffect-running-twice-and-how-to-handle-it-well-in-react – Youssouf Oumar Dec 30 '22 at 13:36