Make React useEffect hook not run on initial render

Question

According to the docs:

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.

We can use the new useEffect() hook to simulate componentDidUpdate(), but it seems like useEffect() is being ran after every render, even the first time. How do I get it to not run on initial render?

As you can see in the example below, componentDidUpdateFunction is printed during the initial render but componentDidUpdateClass was not printed during the initial render.

function ComponentDidUpdateFunction() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log("componentDidUpdateFunction");
  });

  return (
    <div>
      <p>componentDidUpdateFunction: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

class ComponentDidUpdateClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  componentDidUpdate() {
    console.log("componentDidUpdateClass");
  }

  render() {
    return (
      <div>
        <p>componentDidUpdateClass: {this.state.count} times</p>
        <button
          onClick={() => {
            this.setState({ count: this.state.count + 1 });
          }}
        >
          Click Me
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <ComponentDidUpdateFunction />
    <ComponentDidUpdateClass />
  </div>,
  document.querySelector("#app")
);

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

Josefina

may I ask what is the use case when it makes sense to do something based on number of renders and not an explicit state variable like count? – Jennelljenner

@Aprillion, in my case change the content of an H2 that has a text that need to change after the list of item, is empty and was even different at beginning. The same list is also empty at beginning before data fetch from API so with normal conditional rendering based on array length the inititial value is overrrided – Hanser

Answer 1

We can use the useRef hook to store any mutable value we like, so we could use that to keep track of if it's the first time the useEffect function is being run.

If we want the effect to run in the same phase that componentDidUpdate does, we can use useLayoutEffect instead.

Example

const { useState, useRef, useLayoutEffect } = React;

function ComponentDidUpdateFunction() {
  const [count, setCount] = useState(0);

  const firstUpdate = useRef(true);
  useLayoutEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    console.log("componentDidUpdateFunction");
  });

  return (
    <div>
      <p>componentDidUpdateFunction: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

ReactDOM.render(
  <ComponentDidUpdateFunction />,
  document.getElementById("app")
);

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

Amphoteric

I tried to replace useRef with useState, but using the setter triggered a re-render, which is not happening when assigning to firstUpdate.current so I guess this is the only nice way :) – Jennelljenner

Could someone explain why use layout effect if we're not mutating or measuring the DOM? – Refuse

@Refuse It's not necessary in this example, but the question was how to mimic componentDidUpdate with hooks, so that's why I used it. – Amphoteric

I created a custom hook here based on this answer. Thanks for the implementation! – Moloch

Quick recap, the componentDidUpdate lifecycle method is invoked during each render, except the first one. The componentDidMount is only invoked once, after the first render. All answers here use names which may confuse some readers. – Bilk

With the recent React18 that calls usEffect twice in development mode, you'd want to add a cleanUp function, so that preventing running on first render continues to work: useLayoutEffect(() => { if (firstUpdate.current) { firstUpdate.current = false; return; } console.log("componentDidUpdateFunction"); return () => (firstUpdate.current = true); }); – Clavicorn

When using React.StrictMode this does not work, because the useEffect will run twice on first render. Please update your response @Amphoteric – Lauds

Answer 2

You can turn it into custom hook (new documentation page: Reusing Logic with Custom Hooks), like so:

import React, { useEffect, useRef } from 'react';

const useDidMountEffect = (func, deps) => {
    const didMount = useRef(false);

    useEffect(() => {
        if (didMount.current) func();
        else didMount.current = true;
    }, deps);
}

export default useDidMountEffect;

Usage example:

import React, { useState, useEffect } from 'react';

import useDidMountEffect from '../path/to/useDidMountEffect';

const MyComponent = (props) => {    
    const [state, setState] = useState({
        key: false
    });    

    useEffect(() => {
        // you know what is this, don't you?
    }, []);

    useDidMountEffect(() => {
        // react please run me if 'key' changes, but not on initial render
    }, [state.key]);    

    return (
        <div>
             ...
        </div>
    );
}
// ...

Zachery

This approach throws warnings saying that dependency list is not an array literal. – Pitts

I use this hook in my projects and I didn't see any warning, could you provide more info? – Zachery

@vsync You're thinking about a different case where you want to run an effect once on initial render and never again – Mothball

@vsync In the notes section of reactjs.org/docs/… it specifically says "If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument." This matches observed behaviour for me. – Mothball

I also receive the warnings for dependency list is not an array literal and missing dependency: 'func'. The linter rule noted for both is react-hooks/exhaustive-deps – Exacting

@Exacting Okay, I tested the mentioned code (in my answer) and I didn't get any warning, I think it is related to react version that you using or your dependency (state.key in my answer), so I need more info in order to give you better answer. – Zachery

No need to import React in your hook file – Undergrown

he forgot do add: [] around deps... should be something like [deps]... but it doesnt work for me – Overdrive

@CarlosEduardoOliveraFilho I didn't forgot, it is not the case. when you using this hook you should pass the dependencies as array, just like useEffect itself. write your code using useEffect, if everything works then simple change the useEffect to useDidMountEffect and you are good to go. – Zachery

@Mehdi oh, okay, youre right, im sorry, deps received as a parameter to your custom hook is already an array thats why u dont need the [ ]. Thanks! – Overdrive

There is absolutely no reason for the empty useEffect() to be there – Xanthate

You just need return func() to send the return value to useEffect, in case it's a destructor (ie, cleanup function). – Uphroe

for TypeScript code : func is of type React.EffectCallback and deps is of type React.DependencyList – Cutlery

@MehdiDehghani these are the ESLint warning being referred to that I see as well: ESLint: React Hook useEffect has a missing dependency: 'func'. Either include it or remove the dependency array. If 'func' changes too often, find the parent component that defines it and wrap that definition in useCallback.(react-hooks/exhaustive-deps) ESLint: React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.(react-hooks/exhaustive-deps) – Flyte

@Flyte That's because the linter is not clever enough to bypass the rule for our specific code, you can disable the rule, e.g: /* eslint-disable-next-line react-hooks/exhaustive-deps */ or move the code of useDidMountEffect inside your component and then use useCallback or other solutions in order to make ESLint happy. for more details take a look @ https://mcmap.net/q/88506/-how-to-implement-componentdidmount-with-hooks-in-react-to-be-in-line-with-the-eslint-rule-quot-react-hooks-exhaustive-deps-quot-quot-warn-quot/3367974 and Is it safe to omit functions from the list of dependencies?, I disabled the rule btw – Zachery

Note that React strictmode in development will render the component twice on the initial mount. – Vested

Answer 3

I made a simple useFirstRender hook to handle cases like focussing a form input:

import { useRef, useEffect } from 'react';

export function useFirstRender() {
  const firstRender = useRef(true);

  useEffect(() => {
    firstRender.current = false;
  }, []);

  return firstRender.current;
}

It starts out as true, then switches to false in the useEffect, which only runs once, and never again.

In your component, use it:

const firstRender = useFirstRender();
const phoneNumberRef = useRef(null);

useEffect(() => {
  if (firstRender || errors.phoneNumber) {
    phoneNumberRef.current.focus();
  }
}, [firstRender, errors.phoneNumber]);

For your case, you would just use if (!firstRender) { ....

Probabilism

If you add the firstRender to the array of dependencies in the useEffect, this will run twice (the first time, and when firstRender is set to false) when mounting. I removed it from the dependencies in my code and it worked. – Unger

@RafaelDuarte I don't think it would. As far as I know, React wont trigger re-renders when a Ref updates. It would do, if firstRender would be a state. Am I wrong? Edit: Oh, but possibly it re-renders, when a hook result changes.... – Upward

From memory, it'll re-render. That's what ifs are for though :) – Probabilism

Because Booleans are primitives in ES and passed as a values. So useEffect doesn’t know it’s ref. – Carper

Answer 4

Same approach as Tholle's answer, but using useState instead of useRef.

const [skipCount, setSkipCount] = useState(true);

...

useEffect(() => {
    if (skipCount) setSkipCount(false);
    if (!skipCount) runYourFunction();
}, [dependencies])

EDIT

While this also works, it involves updating state which will cause your component to re-render. If all your component's useEffect calls (and also all of its children's) have a dependency array, this doesn't matter. But keep in mind that any useEffect without a dependency array (useEffect(() => {...}) will be run again.

Using and updating useRef will not cause any re-renders.

Needful

Answer 5

@ravi, yours doesn't call the passed-in unmount function. Here's a version that's a little more complete:

/**
 * Identical to React.useEffect, except that it never runs on mount. This is
 * the equivalent of the componentDidUpdate lifecycle function.
 *
 * @param {function:function} effect - A useEffect effect.
 * @param {array} [dependencies] - useEffect dependency list.
 */
export const useEffectExceptOnMount = (effect, dependencies) => {
  const mounted = React.useRef(false);
  React.useEffect(() => {
    if (mounted.current) {
      const unmount = effect();
      return () => unmount && unmount();
    } else {
      mounted.current = true;
    }
  }, dependencies);

  // Reset on unmount for the next mount.
  React.useEffect(() => {
    return () => mounted.current = false;
  }, []);
};

Subatomic

Hello @Whatabrain, how to use this custom hook on passing non-depdendency list? Not an empty which would be the same as componentDidmount but something like useEffect(() => {...}); – Delisle

@KevDing Should be as simple as omitting the dependencies parameter when you call it. – Subatomic

You can lose the second useEffect. It's not doing anything. That ref you're resetting is going straight in the garbage. If there's a "next mount" it will happen to a different instance of the hook with a mounted ref all its own, initialized to false. – Uphroe

And const unmount = effect(); return () => unmount && unmount(); can be simplified to return effect() – Uphroe

@Uphroe I wrote the second effect for completeness, but in the next version of React, multiple mounts and unmounts will be possible, making it more necessary. Good catch on the unmount simplification. You're right! – Subatomic

@Subatomic is that true about the next version? I'd be very curious to learn about that... sounds like a radical change in the paradigm. Do you have a link to docs or an announcement? – Uphroe

@Uphroe It's part of React 18 in strict mode -- reactjs.org/blog/2022/03/29/… – Subatomic

@Subatomic Okay, yes, I stand corrected! Components can now be remounted and retain their state. Which means you're right, we should reset that ref, because an effect that doesn't want to run on mount probably doesn't want to run on remount either. Nice... I learned something today. Thanks! – Uphroe

I would do return () => {mounted.current = false}; to avoid typescript errors such as Type '() => boolean' is not assignable to type 'Destructor' – Espresso

Answer 6

function useEffectAfterMount(effect, deps) {
  const isMounted = useRef(false);

  useEffect(() => {
    if (isMounted.current) return effect();
    else isMounted.current = true;
  }, deps);

  // reset on unmount; in React 18, components can mount again
  useEffect(() => () => {
    isMounted.current = false;
  }, []);
}

We need to return what comes back from effect(), because it might be a cleanup function. But we don't need to determine if it is or not. Just pass it on and let useEffect figure it out.

In an earlier version of this post I said resetting the ref (isMounted.current = false) wasn't necessary. But in React 18 it is, because components can remount with their previous state (thanks @Whatabrain).

Uphroe

In my case it is not calling the last useEffect, as a consequence it won't stop executing the effect after I refreshed the page more than twice. The first time it works but on second refresh isMounted.current is true. Meaning our cleaning up callback was not called :sad_face: – Remde

Answer 7

a simple way is to create a let, out of your component and set in to true.

then say if its true set it to false then return (stop) the useEffect function

like that:

    import { useEffect} from 'react';
    //your let must be out of component to avoid re-evaluation 
    
    let isFirst = true
    
    function App() {
      useEffect(() => {
          if(isFirst){
            isFirst = false
            return
          }
    
        //your code that don't want to execute at first time
      },[])
      return (
        <div>
            <p>its simple huh...</p>
        </div>
      );
    }

its Similar to @Carmine Tambasciabs solution but without using state :) ‍‍‍‍‍‍ ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Tying

Answer 8

I thought creating a custom hook would be overkill and I didn't want to muddle my component's readability by using the useLayoutEffect hook for something unrelated to layouts, so, in my case, I simply checked to see if the value of my stateful variable selectedItem that triggers the useEffect callback is its original value in order to determine if it's the initial render:

export default function MyComponent(props) {
    const [selectedItem, setSelectedItem] = useState(null);

    useEffect(() => {
        if(!selectedItem) return; // If selected item is its initial value (null), don't continue
        
        //... This will not happen on initial render

    }, [selectedItem]);

    // ...

}

Tetany

And what if this particular state variable changes to this value again at some point throughout the component's lifecycle ? This is a case scenario where someone knows 100% percent that will never happen,because as a useEffect dependency,its purpose is to control the side-effects of state change. – Briones

If you are asking "what if selectedItem becomes null again," then yes, you need to either A) make sure it never gets set to null again, or B) initialize useState() with a value other than null, something you know it will never be set to again (i.e., -1). – Tetany

Only this works for me. in my case i gave value > 0 – Usance

Answer 9

You can use custom hook to run use effect after mount.

const useEffectAfterMount = (cb, dependencies) => {
  const mounted = useRef(true);

  useEffect(() => {
    if (!mounted.current) {
      return cb();
    }
    mounted.current = false;
  }, dependencies); // eslint-disable-line react-hooks/exhaustive-deps
};

Here is the typescript version:

const useEffectAfterMount = (cb: EffectCallback, dependencies: DependencyList | undefined) => {
  const mounted = useRef(true);

  useEffect(() => {
    if (!mounted.current) {
      return cb();
    }
    mounted.current = false;
  }, dependencies); // eslint-disable-line react-hooks/exhaustive-deps
};

Datary

Answer 10

This is the best implementation I've created so far using typescript. Basically, the idea is the same, using the Ref but I'm also considering the callback returned by useEffect to perform cleanup on component unmount.

import {
  useRef,
  EffectCallback,
  DependencyList,
  useEffect
} from 'react';

/**
 * @param effect 
 * @param dependencies
 *  
 */
export default function useNoInitialEffect(
  effect: EffectCallback,
  dependencies?: DependencyList
) {
  //Preserving the true by default as initial render cycle
  const initialRender = useRef(true);

  useEffect(() => {
    let effectReturns: void | (() => void) = () => {};

    // Updating the ref to false on the first render, causing
    // subsequent render to execute the effect
    if (initialRender.current) {
      initialRender.current = false;
    } else {
      effectReturns = effect();
    }

    // Preserving and allowing the Destructor returned by the effect
    // to execute on component unmount and perform cleanup if
    // required.
    if (effectReturns && typeof effectReturns === 'function') {
      return effectReturns;
    } 
    return undefined;
  }, dependencies);
}

You can simply use it, as usual as you use the useEffect hook but this time, it won't run on the initial render. Here is how you can use this hook.

useNoInitialEffect(() => {
  // perform something, returning callback is supported
}, [a, b]);

If you use ESLint and want to use the react-hooks/exhaustive-deps rule for this custom hook:

{
  "rules": {
    // ...
    "react-hooks/exhaustive-deps": ["warn", {
      "additionalHooks": "useNoInitialEffect"
    }]
  }
}

Necessarily

Do you need all that logic around the return value? Can't you just return effect()? – Uphroe

Answer 11

Let's look at useEffect from a fundamental angle

Note that the following solution exploits the fundamental nature of useEffect and might not be suitable for all needs. The important thing to remember is that the hook will additionally execute when the component unmounts, which might be a fine tradeoff in some cases.

What you get in return is an elegant and sleek solution without any added complexity as suggested by others.

tl;dr

You can use the cleanup function to achieve a similar result. The cleanup function runs EVERY TIME before* a normal effect function is called.

// a slick oneliner
useEffect(() => closeModal, [router.asPath])

// or 

useEffect(() => () => { // notice the two functions
  // do something here
}, [router.asPath])

// or

useEffect(() => {
  // not here
  return () => {
    // do something here
  }
}, [router.asPath])

---

Why and when does this work?

https://codesandbox.io/s/useeffect-lifecycle-s3gkzs

First, to understand how useEffect lifecycle works, let's create this test:

let i = 0

const MyComponent = () => {
  const router = useRouter() // Next.js router changes value when navigating

  console.log('hooktest: render', ++i)

  useEffect(() => {
    console.log('hooktest: setup', ++i)

    return () => {
      console.log('hooktest: cleanup', ++i)
    }
  }, [router.asPath])

  return null
}

After this component renders, we will get this

// first render (component is mounted)
hooktest: render 1
hooktest: setup 2
// navigated (2nd render)
hooktest: render 3
hooktest: cleanup 4
hooktest: setup 5
// navigated (3rd render)
hooktest: render 6
hooktest: cleanup 7
hooktest: setup 8
// app is closed (component gets unmounted)
hooktest: cleanup 9

With this knowledge, it is easy to manipulate the hook in such way, that we get the function run only the second time the hook is executed*.

*

When exactly does React clean up an effect?
React performs the cleanup when the component unmounts. React also cleans up effects from the previous render before running the effects next time.

~ React docs:

• effects without cleanup
• effects with cleanup

Note: If you develop in <React.StrictMode/>, you will see the effect running twice.
This only happens in development mode.

Visual

Obviously, this solution will not be possible if you actually need the cleanup function. But then, it would be fine to introduce the additional complexity as others suggested. – Visual

Answer 12

@MehdiDehghani, your solution work perfectly fine, one addition you have to do is on unmount, reset the didMount.current value to false. When to try to use this custom hook somewhere else, you don't get cache value.

import React, { useEffect, useRef } from 'react';

const useDidMountEffect = (func, deps) => {
    const didMount = useRef(false);

    useEffect(() => {
        let unmount;
        if (didMount.current) unmount = func();
        else didMount.current = true;

        return () => {
            didMount.current = false;
            unmount && unmount();
        }
    }, deps);
}

export default useDidMountEffect;

Irtysh

I'm not sure this is necessary, since if the component does end up unmounting, because if it does remount, didMount will already be re-initialized to false. – Consumption

@CameronYick it's necessary because when using Fast Refresh the cleanup function will run, but the ref value won't get cleared. This results in glitches while developing - but in production it would be fine. – Takin

I think this is going to set didMount.current to false every time the deps change, and thus never fire the effect! Am I wrong? That didMount reset, if we want it at all, would need to live in a separate useEffect whose deps are [] – Uphroe

Yeah, what I'm seeing when I use this code is the effect never fires at all. – Uphroe

Answer 13

Simplified implementation

import { useRef, useEffect } from 'react';

function MyComp(props) {

  const firstRender = useRef(true);

  useEffect(() => {
    if (firstRender.current) {
      firstRender.current = false;
    } else {
      myProp = 'some val';
    };

  }, [props.myProp])


  return (
    <div>
      ...
    </div>
  )

}

Junkie

Answer 14

Recently I need to run the first effect on the very first render cause I initialize some stores in it and don't want the app to be rendered without this effect being executed at least one time so I ended up with a new hook usePreffect :) cause it runs effect pre-render

/**
 * Same as useEffect but runs the very first effect synchronously on the first render.
 * Useful for state initializing effects
 */
export const usePreffect = (effect: EffectCallback, deps: any[]): void => {
  const isFirstEffectRun = useRef(true);
  // Run the effect synchronously on the first render and save its cleanup function
  const firstCleanUp = useMemo(() => effect(), []);

  useEffect(() => {
    // Skip the first run and return the previously saved cleanup function
    if (isFirstEffectRun.current) {
      isFirstEffectRun.current = false;
      return firstCleanUp;
    }
    return effect();
  }, deps);
};

Atbara

Answer 15

For people who are having trouble with React 18 strict mode calling the useeffect on the initial render twice, try this:

// The init variable is necessary if your state is an object/array, because the == operator compares the references, not the actual values.
const init = []; 
const [state, setState] = useState(init);
const dummyState = useRef(init);

useEffect(() => {
  // Compare the old state with the new state
  if (dummyState.current == state) {
    // This means that the component is mounting
  } else {
    // This means that the component updated.
    dummyState.current = state;
  }
}, [state]);

Works in development mode...

function App() {
  const init = []; 
  const [state, setState] = React.useState(init);
  const dummyState = React.useRef(init);

  React.useEffect(() => {
    if (dummyState.current == state) {
      console.log('mount');
    } else {
      console.log('update');
      dummyState.current = state;
    }
  }, [state]);
  
  return (
    <button onClick={() => setState([...state, Math.random()])}>Update state </button>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="app"></div>

And in production.

function App() {
  const init = []; 
  const [state, setState] = React.useState(init);
  const dummyState = React.useRef(init);

  React.useEffect(() => {
    if (dummyState.current == state) {
      console.log('mount');
    } else {
      console.log('update');
      dummyState.current = state;
    }
  }, [state]);
  return (
    <button onClick={() => setState([...state, Math.random()])}>Update state </button>
    );
}

ReactDOM.createRoot(document.getElementById("app")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Vested

This is when you depend on the [state] and it's the correct, but when one needs the opposite, to make React useEffect to do something specific only on initial render ([]), e.g. setting some flag, then the following could be more appropriate: https://mcmap.net/q/88508/-which-is-the-right-way-to-detect-first-render-in-a-react-component – Chaffinch

Answer 16

Late to the party, but gonna throw another solution here that exploits the lifecycle of useState hook, specifically when it sets the initial value.

const useMountedEffect = (current) => {
    const [ initial ] = useState(current);

    useEffect(() => {
        if (initial !== current) {
            current();
        }
    }, [initial, current]);
}


const useYourHook = (arg0, arg1, ...argN) => {
    useMountedEffect(useCallback((arg0, arg1, ...argN) => {
        // do stuff
    }, [arg0, arg1, ...argN]))
}

Or you can simply add the above useState and check right where you need it - the useMountedEffect hook itself is arguably redundant.

Liebman

Answer 17

If you want to skip the first render, you can create a state "firstRenderDone" and set it to true in the useEffect with empty dependecy list (that works like a didMount). Then, in your other useEffect, you can check if the first render was already done before doing something.

const [firstRenderDone, setFirstRenderDone] = useState(false);

//useEffect with empty dependecy list (that works like a componentDidMount)
useEffect(() => {
  setFirstRenderDone(true);
}, []);

// your other useEffect (that works as componetDidUpdate)
useEffect(() => {
  if(firstRenderDone){
    console.log("componentDidUpdateFunction");
  }
}, [firstRenderDone]);

Guru

I used this, I don't see what's wrong with this, if someone could explain why negative points? – Otherwise

This outputs "componentDidUpdateFunction" on the second render only, not on any subsequent ones. If you take firstRenderDone out of the deps arrray, this will work. – Uphroe

But it's not as tidy as the useRef-based solutions because your first render immediately triggers the second one. So you get a componentDidUpdate event right away, but all that's actually updating is the variable you're using to avoid triggering an update right away. – Uphroe

Answer 18

All previous are good, but this can be achieved in a simplier way considering that the action in useEffect can be "skipped" placing an if condition(or any other ) that is basically not run first time, and still with the dependency.

For example I had the case of :

1. Load data from an API but my title has to be "Loading" till the date were not there, so I have an array, tours that is empty at beginning and show the text "Showing"
2. Have a component rendered with different information from those API.
3. The user can delete one by one those info, even all making the tour array empty again as the beginning but this time the API fetch is been already done
4. Once the tour list is empty by deleting then show another title.

so my "solution" was to create another useState to create a boolean value that change only after the data fetch making another condition in useEffect true in order to run another function that also depend on the tour length.

useEffect(() => {
  if (isTitle) {
    changeTitle(newTitle)
  }else{
    isSetTitle(true)
  }
}, [tours])

here my App.js

import React, { useState, useEffect } from 'react'
import Loading from './Loading'
import Tours from './Tours'

const url = 'API url'

let newTours

function App() {
  const [loading, setLoading ] = useState(true)
  const [tours, setTours] = useState([])
  const [isTitle, isSetTitle] = useState(false)
  const [title, setTitle] = useState("Our Tours")

  const newTitle = "Tours are empty"

  const removeTours = (id) => {
    newTours = tours.filter(tour => ( tour.id !== id))

    return setTours(newTours)
  }

  const changeTitle = (title) =>{
    if(tours.length === 0 && loading === false){
      setTitle(title)
    }
  }

const fetchTours = async () => {
  setLoading(true)

  try {
    const response = await fetch(url)
    const tours = await response.json()
    setLoading(false)
    setTours(tours)
  }catch(error) {
    setLoading(false)
    console.log(error)
  }  
}


useEffect(()=>{
  fetchTours()
},[])

useEffect(() => {
  if (isTitle) {
    changeTitle(newTitle)
  }else{
    isSetTitle(true)
  }
}, [tours])


if(loading){
  return (
    <main>
      <Loading />
    </main>
  )  
}else{
  return ( 

    <main>
      <Tours tours={tours} title={title} changeTitle={changeTitle}           
removeTours={removeTours} />
    </main>
  )  
 }
}



export default App

Hanser

I see no difference in this approach, except for the order of the conditions on the if statement. – Needful

@Needful is not really the same as your if check the same variable, so either one or the other is run, In my use case first if change the title variable the second set back the state variable to true – Hanser

that's what I mean with the order changed. you check if you've set it before, and if you have, you run your function. mine first checks if i've haven't set it yet, and then sets it. otherwise, it runs my function (in your case, changeTitle). – Needful

@Needful I have tried your approach once I had this use case and wasn't working, then I came up with what I wrote above and again I check 2 different variable. At the moment I am over other thins, but I will explain it better why I had to check 2 different variable not the same one. Also there isn't need to downgrade others people answer if they aren't clear. I provided an almost full example, so eventually could be an enhancement of yours, but is more and edge case, otherwise I could have simply have used others answers, included yours. – Hanser

I didn't downvote it. Your answer works. – Needful

Answer 19

    const [dojob, setDojob] = useState(false);

    yourfunction(){
        setDojob(true);
    }

    useEffect(()=>{
        if(dojob){
            yourfunction();
            setDojob(false);
        }
    },[dojob]);

Bard

See "How to Answer" and Explaining entirely code-based answers". While this might be technically correct, it doesn't explain why it solves the problem or should be the selected answer. We should educate along with helping solve the problem. – Chorion

Please don't post code-only answers. The main audience, future readers, will be grateful to see explained why this answers the question instead of having to infer it from the code. Also, since this is an old question, please explain how it complements all other answers. – Ensemble

Answer 20

Everyone is giving complicated answers, so I'll just leave it her:

This will render on initial load:

useEffect(() => {
    setData(data)
  });

This will not render on initial load

useEffect(() => {
    setData(data)
  }, []);

Just Javascript stuff :shrug:

Radiochemical

This is not right. The first one will run on every render and the second one will run only once on the initial render. – Gummous

yes, the second will load on the initial render, but not on the initial load. So when you visit the app it will not fetch the data, unless some changes are made, example state change – Radiochemical