useEffect firing in children before parent

Do you want to request a feature or report a bug? Feature (I believe) What is the current behavior? Right now, the effects in useEffect fire children-first. I know this makes sense, since the behaviour of the first render has a close correlation to cDm. However, I cannot seem to find a way to fire events parent-first. Before, I could do it with cWm, and after that was deprecated, in the constructor. How can I accomplish that with hooks? CodeSandbox example: https://codesandbox.io/s/035lqnozzl?fontsize=14 What is the use case? Imagine I want to post to an external server when two components were first rendered, to measure a sort of meaningful paint.

- Component A -> post("first render"", component: A)
----
--------
------------ Component B -> post("first render", component: B)

How could I accomplish this with hooks?

[dy]

Can we please elaborate the answer? Facing the same situation https://codesandbox.io/s/0qx6lq4lrn?fontsize=14.

Basically I hoped to run “startup” code, setting up API, managing saved session, redirecting to sign-in if user is not authenticated, connecting store to network events etc., basically setting up App state. First expectation for that is to put useEffect at the root level, ie. in App:

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { navigate } from "hookrouter";

import "./styles.css";

function App() {
  let auth = useStore('auth')
  useEffect(() => {
    console.log("startup");
    if (!auth.tokens) navigate('/sign-in')
    // ...restore saved session, redirects etc.
  }, []);

  return <Content />;
}

function Content() {
  useEffect(() => {
    console.log("init data");
    // ...fetch content etc.
  }, []);

  return <></>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

But the children effects run before the App. What would be the right way to organize startup?

@gaearon @mpgon

[gaearon]

But that’s not how React works. It won’t somehow paint the child separate from the parent. Maybe you can add an example where it matters? I don’t understand the pattern you’re referring to.