React: コンポーネントのレンダリングについて

Question

実現したいこと

コンポーネントの読み込みタイミングを制御する方法を知りたい

困っていること
_app.js内で毎回、初期データを取得する用のコンポーネントを入れてどのページでも読み込まれるRootがあるのでが、このRootでaxiosでAPIを叩いて、取得したデータをreduxのstoreに入れる前に他のコンポーネントが読み込まれるのを防ぎたいのですが、制御する方法が分からず困っています。

解決したいこと
Root内でのaxiosを使ってAPIを叩いた時に、reduxのstoreに値を入れるまで他のコンポーネントがレンダリングされないようにしたいです。

//_app.js
function App({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Root />
      <Component {...pageProps} />
    </Provider >
  )
}

function Root() {
  const dispatch = useDispatch();

  useEffect(() => {
    const axiosData = async () => {
      await axios.get(API_PATH)
        .then(res => { dispatch(setUserAction(res.data)) })
    }
    axiosData();
  }, []);

  return <></>;
}

// users.js
function Users() {
  useEffect(() => {
    const selector = useSelector((state: RootState) => state);
    const user = selector.user;
    if (user) { return }
    // ログアウトしていたらリダイレクトする
    Router.push('/')
  })
}

Answer 1

Reduxで管理する値に「RootからのAjaxで値を読み込み済みかどうか」のフラグも入れて、そのフラグを各コンポーネントで見て動作を制御する、あるいはAppからRoot以外を読み込むかを決める、という形が素直かと思います。