Running React parent effects before child effects

Effect.jsx

// Sometimes you want to run parent effects before those of the children. E.g. when setting
// something up or binding document event listeners. By passing the effect to the first child it
// will run before any effects by later children.

export function Effect({ effect }) {
  useEffect(() => effect?.(), [effect]);
  return null;
}

//
// Use it like this:
//

function Parent() {
  const stableEffect = useCallback(() => doStuff(), []);

  return (
    <>
      <Effect effect={stableEffect} />
      <SomeChild />
    </>
  );
}

You deserve a medal for this solution! Thank you for inventing it for us :)

You saved my life! Thank you very much!