Can I rely on the useEffect order in a component?

Question

Consider following pattern:

const Comp = ({ handler })=> {
  // handler is some callback of the form ( ) => void
  useSomeHook(handler);
  //...
}

function useSomeHook(cb) {
  const ref = useRef()

  useEffect(() => {
    ref.current = cb; // update ref before second useEffect
  })

  useEffect(() => {
    // use the current (most recent) ref value
    const iv = setInterval(() => { ref.current() }, 3000) 
    return () => { clearInterval(iv) };
  }, []) // run only after first render
}

Question: Can I rely on the fact, that first useEffect is always executed before second useEffect, so ref has already been updated?

Background: My intent is to avoid memoizing passed-in callback in Comp (useCallback) and setting cb as dep. I am specifically interested, if this mutable ref pattern is valid in React world - above is just a contrived example.

I thought, the answer would be a clear "Yes!", after having read a tweet from Dan Abramov. Though, following issue states:

We do not make guarantees about sibling order, whether within a component or between siblings. This is because strong guarantees there hinder refactoring. Within a component, you should be able to re-order Hooks—especially, custom ones.

Did I have interpreted above statement wrong - or are the links a bit contradictory? Appreciate any clarifications.

PS: I am aware of linked post. This question is more about the general pattern, official docs and related to mentioned contradictory(?) statements.

Thanks!

A solution may be this lib: https://github.com/theKashey/use-callback-ref — Guilherme Toti, Apr 09 '20 at 13:45

Zachary Haber · Accepted Answer · 2020-04-09T14:49:40.967

The order you call them in matters, as far as I'm aware, two useEffect calls in a component will always run in the same order. That's how React identifies which hook is which (based on order).

One of the main things you can't do is conditionally run a hook for the reason mentioned above: React keeps track of hooks that are called based on the order (index) they are called in the component.

This quote, is talking about the order of cleanup calls in components and between parent and child components. Typically, what you do in the clean up part shouldn't be something that would affect other hooks. Usually what you do is clean up any lasting side effect in your hook. Things like cancelling API calls and clearing intervals.

We guarantee that parent effects are destroyed before the child ones. The reason for this is that parents often tend to depend on some resource created by the child. Such as removing a listener from a DOM node managed imperatively by a child. If the child disposes its resources first, the parent might not be able to properly clean itself up. This is not specific to Hooks — it’s how componentWillUnmount works as well.

We do not make guarantees about sibling order, whether within a component or between siblings. This is because strong guarantees there hinder refactoring. Within a component, you should be able to re-order Hooks—especially, custom ones. Between siblings, it is expected that you can re-order them safely too. It is also common that only one sibling updates or unmounts, so dependencies between siblings cannot be reliable anyway.

The order between parent and child are set. For example, a Parent component that renders 2 Children.

<Parent>
  <Child/>
  <Child/>
</Parent>

Edit: This is how I'd refactor your code:

I'd make sure to include the cb in the initial useRef, and then use the cb in the dependency array of the first effect to update the ref.

Then you'd make sure to clear the interval in the second effect.

const Comp = ({ handler }) => {
  // handler is some callback of the form ( ) => void
  useSomeHook(handler);
  //...
};

function useSomeHook(cb) {
  const ref = useRef(cb);

  useEffect(() => {
    ref.current = cb; // update ref before second useEffect
  },[cb]);

  useEffect(() => {
    const id = setInterval(() => {
      ref.current();
    }, 3000); // use the current (most recent) ref value
    return () => {
      clearInterval(id);
    };
  }, []); // run only after first render
}

I believe you've conflated two concepts and misinterpreted the quote as a result. Yes, the order in which the `useEffect()` hooks are invoked matters (and as you have explained, this is necessary in order to distinguish them apart), but the quote is saying that the order in which the _callbacks passed to them_ are invoked is not guaranteed. — Patrick Roberts, Apr 09 '20 at 14:34
The quote is talking about cleanup in particular. I agree that I missed that the order of the cleanup isn't guaranteed within the component, but that's only the order of the cleanup. The OP was asking if he can rely on the first useEffect running before the second, which should always be the case otherwise hooks wouldn't make any sense. — Zachary Haber, Apr 09 '20 at 14:44
@ZacharyHaber thanks, you could be right, that this statement is only about cleanups (and I didn't know, that cleanup order within comp is *not* guaranteed). I asked for clarification in the issue - if it is like you say, I'll accept your answer — bela53, Apr 09 '20 at 15:14
As far as I understand, within a useEffect, the cleanup function (returned from the callback) is always called before the next callback, so the cleanups being possibly out of order has a strong implication for the (out-of) ordering of the next callback. Also, as a practical matter, if you use the 2nd argument to useEffect or any async functions inside a useEffect, you will have all kinds of out-of-orderness happening... — Chris Chiasson, Apr 09 '20 at 22:12

Can I rely on the useEffect order in a component?

1 Answers1