CODEWITHSUNDEEP
javascriptreactjs
Hamza Abbas
Hamza Abbas

Reputation: 91

The function of my code runs twice instead of once?

`

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 result of code in image below

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?

Upvotes: 1

Views: 154

Answers (4)

tomleb
tomleb

Reputation: 2535

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.

Upvotes: 0

Hammed Noibi
Hammed Noibi

Reputation: 81

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();
    }, []);

Upvotes: 2

Azzy
Azzy

Reputation: 1731

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')

Upvotes: 0

Nusrat Jahan
Nusrat Jahan

Reputation: 76

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.

Upvotes: 0

Related Questions