UseEffect being called multiple times

Question

I thought useEffect is called once only after render, but it's being executed multiple times and not in the order I expected.

I expected it to msg 'data loading' while the fetch is in progress and then once fetch is done, render the title field and alert "..Done..." once and that should be the end.

I added ALERT and console logs at the two points to determine the flow and both alerts and console logs appear more than once and in different orders. Could you kindly run this code and see the behaviour. I kept the 2nd argument array as null to make it run once only but does not help.

Please clarify if react RENDER means DISPLAY on screen? what stage does LOAD indicate? When is the display done?

code follows:

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

function DemoFetchZ() {
  let data = { title: "Waiting for Data" };
  const [todo, setTodo] = useState(data);
  const [isData, setData] = useState(false);
  const [isFetching, setFetching] = useState(false);

  useEffect(() => { // called after the first render
    async function fetchData() {
      setFetching(true);
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/todos/1"
      );
      console.log("response = ", response);
      let data = await response.json();
      setTodo(data); //updt state
        setFetching(false);
        setData(true)
      console.log("Data = ", data);
    }
    fetchData();
  }, []); //[isData] null value will execute once only?

  if (isFetching) {
      console.log("data loading ......")
      alert ("data loading")
      return (<div>...Data Loading.....</div>);
  }

  return (
    <div>
           - Fetch
          <br /> {alert("..DONE...")}
      <span>Title: {todo.title}</span>
    </div>
  );
}

export default DemoFetchZ;

Answer 1

Your useEffect is executed only once per render cycle, but you have several state updates in your useEffect which cause a re-render. Hence you get a lot of alerts.

See a demo of your code and see the console.logs as well as comments

Also note that useEffect will

• when you provide empty array dependency, your useEffect execute once
• when you some value as dependency (eg: [name] ), your useEffect execute when name state/prop changes
• useEffect executes on every re-render if you don't pass the dependency array.

Read here on re-render

Answer 2

For future readers.

React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.

The useEffect callback in this case runs twice for the initial render. After state change, the component renders twice, but the effect should run once.

Read the Offical React Doc for more troubleshooting

Read this link, or this for more details.

Answer 3

refactor it like this.

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

const DemoFetchZ = () => {
  const [todo, setTodo] = useState({});
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = () => {
    setLoading(true);
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((data) => {
        setTodo(data);
        setLoading(false);
      })
      .catch((error) => {
        console.log(error);
        setLoading(false);
      });
  };

  return (
    <>
      {loading ? (
        <div>...Data Loading.....</div>
      ) : (
        <div>
          - Fetch
          <br />
          <span>Title: {todo ? todo.title : "no Title Found"}</span>
        </div>
      )}
    </>
  );
};

export default DemoFetchZ;

Answer 4

If you have just made a new project using Create React App or updated to React version 18, you will notice that the useEffect hook is called twice in development mode. This is the case whether you used Create React App or upgraded to React version 18. In this article, we'll learn about the useEffect hook in React 18's Strict Mode, which has a strange behavior. The standard behavior of the useEffect hook was modified when React 18 was introduced in March of 2022. If your application is acting weird after you updated to React 18, this is simply due to the fact that the original behavior of the useEffect hook was changed to execute the effect twice instead of once.

If we used the useEffect hook as follows:

useEffect(() => {
  console.log("First call on mount..");

  return () => console.log("Cleanup..");
}, []);

The output to the console should look like this:

First call on mount..
Cleanup..
First call on mount..

The useEffect hook, which should only be called on the first mount, is called two times.

Now what if we need to use the useEffect hook to fetch data, so that it does not fetch twice? One easy solution to this behavior is to disable strict mode. Open the src/index.js file and remove the StrictMode higher order component:

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Answer 5

Here is the solution We can prevent multiple rendering on useEffect using useRef hook

const initialized = useRef(false);
useEffect(() => {
  if (!initialized.current) {
    initialized.current = true

    // Your code on effect here...
    ...
  }
}, []) // You may set dependency also