React Router中useEffect执行顺序异常问题咨询

在App.js中使用useEffect向Redux存储数据，在路由页面的useEffect中调用该数据时，出现了不符合预期的执行顺序。简化代码后，控制台日志显示：App.js的外部console.log先执行，接着是Home.js的外部console.log，但Home组件的useEffect却早于App组件的useEffect执行。请问该现象是否正常？如何避免此问题？

代码示例 #

app.js #

import React, { useEffect } from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './pages/Home';
const router = createBrowserRouter([{ path: '/', element: <Home /> }]);
const App = () => {
  console.log('App');
  useEffect(() => {
    console.log('appUseEffect');
  }, []);

  return <RouterProvider router={router}></RouterProvider>;
};

export default App;

home.js #

import React, { useEffect } from 'react';
const Home = () => {
  console.log('Home');
  useEffect(() => {
    console.log('homeUseEffect');
  }, []);
  return <div>Home</div>;
};
export default Home;

控制台输出 #

App.js    :7 App
Home.js   :4 Home
Home.js   :6 homeUseEffect
App.js    :9 appUseEffect

现象是否正常？ #

这是完全正常的现象，核心原因是React组件挂载逻辑和RouterProvider的渲染机制：

1. App组件执行时，先同步执行外部的console.log('App')，随后开始渲染RouterProvider。
2. RouterProvider会立即渲染匹配到的路由组件（即Home），此时Home组件的外部console.log('Home')同步执行。
3. React的useEffect是在组件挂载完成后触发的，挂载顺序遵循子组件先完成、父组件后完成的规则：Home作为App的子组件，会先走完挂载流程，因此它的useEffect先执行；等App组件完成所有子组件的渲染后，才会触发自身的useEffect。

解决方法 #

如果需要确保App的初始化逻辑（比如向Redux存数据）先完成，再让Home执行依赖该数据的逻辑，可以用以下几种方案：

方案1：控制路由组件的渲染时机 #

在App中添加状态，等App的useEffect执行完成后再渲染RouterProvider：

import React, { useEffect, useState } from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './pages/Home';
const router = createBrowserRouter([{ path: '/', element: <Home /> }]);
const App = () => {
  console.log('App');
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    console.log('appUseEffect');
    // 这里执行向Redux存储数据的逻辑
    setIsReady(true);
  }, []);

  // 未初始化时显示加载状态，避免Home提前挂载
  if (!isReady) return <div>加载中...</div>;

  return <RouterProvider router={router}></RouterProvider>;
};

export default App;

方案2：让Home的useEffect依赖Redux数据 #

在Home组件中，把需要的Redux数据加入useEffect的依赖数组，仅当数据存在时执行逻辑：

import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
const Home = () => {
  console.log('Home');
  const targetData = useSelector(state => state.yourTargetData);

  useEffect(() => {
    // 仅当Redux数据存在时执行后续逻辑
    if (targetData) {
      console.log('homeUseEffect：已获取到Redux数据');
      // 这里处理依赖数据的逻辑
    }
  }, [targetData]); // 依赖Redux中的目标数据

  return <div>Home</div>;
};
export default Home;

方案3：利用React Router的Loader功能（v6+） #

如果使用React Router v6及以上版本，可以用路由的Loader在组件渲染前完成数据初始化：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './pages/Home';
import store from './store'; // 导入你的Redux store

// 定义路由Loader，在组件渲染前执行数据存储逻辑
const homeLoader = async () => {
  // 执行向Redux存储数据的动作
  await store.dispatch(yourDataAction());
  return {}; // 返回的内容可通过useLoaderData获取
};

// 创建路由时配置loader
const router = createBrowserRouter([
  { 
    path: '/', 
    element: <Home />,
    loader: homeLoader
  }
]);

const App = () => {
  console.log('App');
  return <RouterProvider router={router}></RouterProvider>;
};

export default App;

内容的提问来源于stack exchange，提问作者Omid