useEffect only on update (or only on mount)

[gnapse]

Even though the documentation says it's a rare thing, I'm bothered by the fact that there's no built-in way to control if you want useEffect to run only on component update, and not on first mount.

I was thinking of creating either this:

useEffectOnUpdate(() => {
  // ...
});

or this:

useEffectEnhanced((isComponentUpdate) => {
  if (isComponentUpdate) {
    // ...
  }
});

on mount

Not to mention that the official way to restrict useEffect to run only on mount is not very clear or self-explanatory at all:

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

Maybe I can combine these two gripes to provide these two useEffect alternatives: useEffectOnMount, useEffectOnUpdate. Would also like to provide the third alternative that always run, but receives a flag isComponentUpdate or isComponentMount, but I'm not sure about that, or what to call it (useEffectEnhanced is not very clear in its intention too 😕).

Thoughts?

[kivervinicius]

useEffect(function onMount () {
        console.log("onMount");
}, []);

useEffect(function onUpdate () {
     console.log("onUpdate");
}, [props.myProp]);

[gnapse]

The thing is that this

useEffect(function onUpdate () {
     console.log("onUpdate");
}, [props.myProp]);

Runs not only on update of props.myProp, but also on mount.

[kivervinicius]

@gnapse I understand, well in that case when this need arises I would not add the onMount events to the onUpdate, however you're right ...

[milesegan]

I'd like to see a nicer solution to this too. It's a very common use case and having to manually create and manage a ref just to distinguish mount vs update seems like a very clunky fix for an otherwise very elegant API.