We currently run all passive destroy functions for an individual Fiber before running passive create functions. What we *should* be doing is running all passive destroy functions for *all* fibers before running *any* passive create functions (like we do for layout effects).

The reason this is important is that interleaving destroy/create effects between sibling components might cause components to interfere with each other (e.g. a destroy function in one component may unintentionally override a ref value set by a create function in another component).

We handle this for layout effects by invoking *all* destroy functions during the "mutation" phase and *all* create functions during the "layout" phase, but for passive effects we call both in a single traversal:
https://github.com/facebook/react/blob/38cd75861f44a40e686a39403bff39bf16fd796d/packages/react-reconciler/src/ReactFiberCommitWork.js#L394-L409

Fixing this probably means splitting our passive effects loop into two passes:
https://github.com/facebook/react/blob/38cd75861f44a40e686a39403bff39bf16fd796d/packages/react-reconciler/src/ReactFiberWorkLoop.js#L2179-L2222

However this could be a breaking change (since it would affect timing) so we should probably do it behind a feature flag for now.

Also note that splitting this into two passes could have another unintended effect: an error thrown in a passive destroy function would no longer prevent subsequent create functions from being run on that Fiber (as is currently the case) unless we added code to handle that specific case. We should decide what the expected behavior is here.
initialArg: I,
  init?: I => S,
): [S, Dispatch<A>] {
  const hook = mountWorkInProgressHook();
  let initialState;
  if (init !== undefined) {
    initialState = init(initialArg);
  } else {
    initialState = ((initialArg: any): S);
  }
  hook.memoizedState = hook.baseState = initialState;
  const queue = (hook.queue = {
    pending: null,
    dispatch: null,
    lastRenderedReducer: reducer,
    lastRenderedState: (initialState: any),
  });
  const dispatch: Dispatch<A> = (queue.dispatch = (dispatchAction.bind(
    null,
    currentlyRenderingFiber,
    queue,
  ): any));
  return [hook.memoizedState, dispatch];
}
function updateReducer<S, I, A>(
  reducer: (S, A) => S,
  initialArg: I,
  init?: I => S,
): [S, Dispatch<A>] {
  const hook = updateWorkInProgressHook();