1

An API call is being made from useEffect() and when the application is refreshed, useEffect() is called twice and API is call is made twice.

// App.js

import { useEffect, useCallback } from "react";

function App() {
  const fetchUsers = useCallback(async () => {
    try {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/users"
      );
      const data = await response.json();
      console.log("data: ", data); // displayed two times in console.
    } catch (error) {
      console.log("Error in catch!");
    }
  }, []);

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

export default App;

how to fix this? useCallback() also has no effect in not invoking fetchUsers() function twice.

Here is the full code. CodeSandBox

using react v18

Edit: Removing <React.StrictMode> has solved the issue, but I don't want to remove it, as it is useful in warning potential issues in the application.

Is there any other solution?

ram
  • 237
  • 2
  • 14
  • It's the Default behavior in react18. You can check using the below link. https://www.techiediaries.com/react-18-useeffect/ Also you can try this solution: Removed strict mode of react and it works normally. – sedhal Jul 05 '22 at 13:33
  • I don't want to remove strictMode, Is there any other solution? – ram Jul 05 '22 at 13:36
  • Yes, You can downgrade react version one step like 18 to 17 because React 18 is now in beta. – sedhal Jul 05 '22 at 13:37
  • Not inclined to downgrade. Need a fix with v18. I created app with create-react-app and it by default installed react18. if it's in beta why create-react-app installed react18? also, I see on react docs, react 18 as official release. – ram Jul 05 '22 at 13:39
  • I have added one temporary solution for it please look at it. – sedhal Jul 05 '22 at 13:47
  • as long as you don't do any updates directly to the DOM, you won't even notice that this is happening and it will resolve itself in production. – Dimitar Jul 05 '22 at 13:56
  • Does this answer your question? [React 18, useEffect is getting called two times on mount](https://stackoverflow.com/questions/72238175/react-18-useeffect-is-getting-called-two-times-on-mount) – Youssouf Oumar Aug 13 '22 at 17:43

1 Answers1

2

New Strict Mode Behaviors

In short, there is no "fix" as this is intentional. Do not remove Strict mode as some users are suggesting. You will see it only in development mode.

In the future, we’d like to add a feature that allows React to add and remove sections of the UI while preserving state. For example, when a user tabs away from a screen and back, React should be able to immediately show the previous screen. To do this, React would unmount and remount trees using the same component state as before.

This feature will give React apps better performance out-of-the-box, but requires components to be resilient to effects being mounted and destroyed multiple times. Most effects will work without any changes, but some effects assume they are only mounted or destroyed once.

To help surface these issues, 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.

Mulan
  • 129,518
  • 31
  • 228
  • 259
  • ok agreed, How about this solution by cs alam ```const isMounted = useRef(); useEffect(() => { if (!isMounted.current) return; isMounted.current = true; // ...rest of your code goes here... },[]) ``` from this link https://stackoverflow.com/questions/71856774/useeffect-getting-called-twice-in-react-v18 I did not understand this ```const isMounted = useRef();useEffect(() => {console.log("is mounted",!!isMounted.current); // this is giving 'false' both the times}, [fetchUsers]);``` – ram Jul 05 '22 at 14:06
  • @ram nothing is broken so there's nothing to fix. don't worry that the hook runs twice in development mode :) – Mulan Jul 05 '22 at 14:16
  • @Mulan's answer is great, and for a more detailed one you can visit https://stackoverflow.com/a/72238236/15288641. – Youssouf Oumar Sep 25 '22 at 09:38