The function of my code runs twice instead of once?

Question

`

import './App.css';
import ArrayState from './components/ArrayState';
import FetchApi from './components/FetchAPI/FetchApi';
import Login from './components/Login';
import Useeffect2 from './components/Useeffect2';
import UseEffects from './components/UseEffects';
import React,{useEffect} from 'react'


function App() {
  const getUsers = async() => {
       console.log("function")
    }
    useEffect(() => {
        
    console.log("use")
        
        getUsers();
    });
  return (
  //  <ArrayState/>
  // <Login/>
  // <UseEffects/>
  // <Useeffect2/>
  <FetchApi/>
  );
}

export default App;

the function "getUsers" is called once in "UseState" but its runs 2 times. i want to run function once. i have define body of function into useEffect?

Does this answer your question? [Why is my React component is rendering twice?](https://stackoverflow.com/questions/48846289/why-is-my-react-component-is-rendering-twice) — FreePhoenix888, Nov 06 '22 at 07:21
Does this answer your question? [useEffect is running twice on mount in React](https://stackoverflow.com/questions/72238175/useeffect-is-running-twice-on-mount-in-react) — Youssouf Oumar, Nov 23 '22 at 04:14

Hammed Noibi · Answer 1 · 2022-11-06T07:51:52.197

1

add empty array to the useEffect, so that it only make calls on page first load

 useEffect(() => {
        const getUsers = async() => {
       console.log("function")
    }
    console.log("use")
        
        getUsers();
    }, []);

edited Nov 06 '22 at 07:51

answered Nov 06 '22 at 07:19

Hammed Noibi

51
1
5

i done but it not works – Hamza Abbas Nov 06 '22 at 07:21
edited check again – Hammed Noibi Nov 06 '22 at 07:51

score 0 · Answer 2 · answered Nov 06 '22 at 07:16

0

You can pass an empty array as the second argument to the useEffect hook :

useEffect(() => {
  // Side Effect
}, []);

In this case, the side effect runs only once after the initial render of the component.

answered Nov 06 '22 at 07:16

Nusrat Jahan

66
4

i done but it not works – Hamza Abbas Nov 06 '22 at 07:25

Azzy · Answer 3 · 2022-11-06T07:38:20.847

0

Already answered

You need to provide an dependency array

useEffect(() => {


}, []) // dependency array with props, variable that trigger the side effect

even this will run twice in development due to stritct mode, which helps is catching bugs related to cleanup but if you want to disable it (not recommended)

    // generally in index.js
    ReactDOM.render(
      <React.StrictMode> // remove this to disable stritct mode
        <App />
      </React.StrictMode>,
   document.getElementById('root')

edited Nov 06 '22 at 07:38

answered Nov 06 '22 at 07:22

Azzy

1,717
2
13
17

it does not work – Hamza Abbas Nov 06 '22 at 07:25
I edited the answer to be more clear – Azzy Nov 06 '22 at 07:38

score 0 · Answer 4 · answered Nov 06 '22 at 07:54

If you're using React 18 and your app is wrapped in the <StrictMode> tag, then this is expected behavior added on purpose in the hopes to help devs catch bugs relevant to the lifecycle of their components, such as abusing/misusing the useEffect hook.

What the new StrictMode actually does is unmount and then remount every component once it gets rendered.

Resulting in an initial lifecycle that looks like this:

* React mounts the component.
  * Layout effects are created.
  * Effects are created.
* React simulates unmounting the component.
  * Layout effects are destroyed.
  * Effects are destroyed.
* React simulates mounting the component with the previous state.
  * Layout effects are created.
  * Effects are created.

Note that it only behaves this way in dev environment, and not in the production build.

ref: https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors

P.S. you should also add the empty dependency array as mentioned in other comments, otherwise it will also run every time the component re-renders.

The function of my code runs twice instead of once?

4 Answers4

Linked