useEffect hooks are running to completion BEFORE rendering is completed

I am utterly astounded that I haven't been able to find more posts about this on stack overflow. Everything about a useEffect hook in react reads that it's supposed to run only after rendering and re-rendering has finished but my hooks are doing the EXACT opposite thing, much to my frustration.

They are all running to completion before I see anything render on my screen whatsoever which goes against everything useEffect hooks are supposed to do.

All I'm trying to do here is have a single button be highlighted/focused when the page loads in.

Here's a very dumbed down version of my useEffect code.

const [loading, setLoading] = useState(true)

useEffect(()=> {

    /* doing a bunch of non-related stuff here. */

    setLoading(false)
    console.log("setLoading to false.")

    
}, [])

useEffect(() => {
    if(loading == false)
    {
        console.log("Loading verified to be false");
        SpatialNavigation.focus(".onboarding-button-welcome") // this highlights the button.
    }
},[loading])

return (
 <button className="onboarding-button-welcome"> Get Started </button>
)

As you can see, the loading state variable starts as true for the initial render and is then supposed to then be changed to false by the upper useEffect, which causes the lower useEffect to fire, check that the loading state variable is false, then focus the button.

My problem (and I've checked this a thousand times with a debugger) is that all of the above is happening before I see anything appear on my screen. I see no button until after all the code has run.

The useEffect hooks are completing and THEN my render is completing, which means that my SpatialNavigation.focus() method is not finding any button to focus in the DOM, which means that the page loads in without the button being highlighted. I never see anything on my screen until all my useEffect hooks have run and that's a major problem because well....

Everything posted everywhere about useEffect hooks says this functionality should be impossible since they are only supposed to fire AFTER rendering has completed and the screen has content so what gives here? Like I said, I'm kinda shocked that I haven't seen this question posted on stack overflow because it's a pretty glaring issue as far as React's functionality is concerned.

I should note that I do have a tried and proven albeit hacky way to fix this by wrapping the SpatialNavigation.focus() line in a setTimeout function but I'd rather not have to do that. I just want the rendering and hooks to trigger in the order that they should be triggering.

TL;DR

My simple React code's execution order is somehow:

1. useEffect hooks
2. Rendering the button

and I want it to be (the way it SHOULD be according to React):

1. Rendering the button
2. useEffect hooks

The useEffect hook in React runs after rendering but does not guarantee that rendering is completed before its execution. If you need to interact with a rendered element, use useRef to ensure it's available in the DOM.

   import { useEffect, useLayoutEffect, useRef, useState } from 'react';

function MyComponent() {
  const [loading, setLoading] = useState(true);
  const buttonRef = useRef(null);

  useEffect(() => {
    /* doing a bunch of non-related stuff here. */

    setLoading(false);
    console.log("setLoading to false.");
  }, []);

  useLayoutEffect(() => {
    if (!loading && buttonRef.current) {
      console.log("Button element exists in the DOM, focusing...");
      buttonRef.current.focus();
    }
  }, [loading]);

  return (
    <button className="onboarding-button-welcome" ref={buttonRef}>
      Get Started
    </button>
  );
}

Its happening before you see anything on the screen because react invokes both useEffect's very very quickly.

setTimeout feels like a good fit for your use case.

Unless you're actually waiting for a response from an async operation, chances are high that both useEffects are going to be invoked near instantaneously.