如何利用React.Suspense合并JS chunk与数据请求的加载器？

在React 18.2.0项目中使用懒加载组件时，会出现两个加载器依次显示的闪烁问题：

• JS chunk请求阶段，Suspense的fallback加载器会显示
• 组件渲染完成后，组件内部通过useEffect请求数据，又会显示另一个加载器

该问题仅在网络限速（如3秒延迟）场景下可复现，我们需要合并这两个加载器，实现平滑加载以避免闪烁。

示例代码 #

App.js #

import React, { Suspense } from "react";
import "./styles.css";

const OtherComponent = React.lazy(() => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(import("./Component"));
    }, 3000);
  });
});

export default function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

Component.jsx #

import React, { useEffect, useState } from "react";
export default function Component(props) {

  const [user, setUser] = useState("");
  const [loading, setIsLoading] = useState(true);

  useEffect(() => {
    setIsLoading(true);
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((json) => {
        setUser(json.title);
        setIsLoading(false);
      });
  }, []);

  if (loading) return <div>Loading data....</div>;
  
  return <div>{user}</div>;
}

方法1：合并组件懒加载与数据请求 #

把数据请求逻辑移到React.lazy的Promise回调中，等组件代码和数据都准备完成后再渲染组件，这样只需要一个Suspense加载器：

修改App.js：

import React, { Suspense } from "react";
import "./styles.css";

const OtherComponent = React.lazy(() => {
  // 同时发起组件代码请求和数据请求
  return Promise.all([
    import("./Component"),
    fetch("https://jsonplaceholder.typicode.com/todos/1").then(res => res.json())
  ]).then(([module, data]) => {
    // 将预加载的数据通过props传递给组件
    return {
      default: props => <module.default {...props} initialData={data} />
    };
  });
});

export default function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

修改Component.jsx：

import React from "react";
export default function Component({ initialData }) {
  // 直接使用预加载的数据，无需再发起请求
  return <div>{initialData.title}</div>;
}

这种方案彻底合并两个加载阶段，仅显示一次加载器，但组件代码和数据必须同时加载完成，无法单独缓存其中一项。

方法2：使用Suspense兼容的数据获取方案 #

React 18的Suspense支持在渲染阶段直接获取数据，而非useEffect，这样数据请求和组件懒加载可以共享同一个Suspense fallback。

自定义Suspense数据源示例： #

先创建数据获取工具：

// dataFetcher.js
export function fetchUser() {
  let promise;
  return function() {
    if (!promise) {
      promise = fetch("https://jsonplaceholder.typicode.com/todos/1").then(res => res.json());
    }
    if (promise.status === "fulfilled") {
      return promise.value;
    } else if (promise.status === "rejected") {
      throw promise.reason;
    } else {
      throw promise;
    }
  };
}

const getUser = fetchUser();

修改Component.jsx：

import React from "react";
import { getUser } from "./dataFetcher";

export default function Component() {
  // 渲染阶段直接获取数据，Suspense会捕获Promise并显示fallback
  const user = getUser();
  return <div>{user.title}</div>;
}

App.js无需修改，组件懒加载和数据请求会触发同一个Suspense fallback，不会出现两次加载器切换的闪烁。

方法3：视觉优化统一加载状态 #

如果无法修改数据获取逻辑，可以通过统一加载UI+延迟显示的方式减少闪烁感：

修改Component.jsx：

import React, { useEffect, useState } from "react";
export default function Component(props) {

  const [user, setUser] = useState("");
  const [loading, setIsLoading] = useState(true);
  // 添加延迟状态，避免组件渲染后立即切换加载器
  const [showLoader, setShowLoader] = useState(false);

  useEffect(() => {
    // 延迟100ms显示内部加载器，避开Suspense加载器的切换时机
    const timer = setTimeout(() => setShowLoader(true), 100);
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((json) => {
        setUser(json.title);
        setIsLoading(false);
      });
    return () => clearTimeout(timer);
  }, []);

  // 仅在延迟后且加载中时显示加载器
  if (loading && showLoader) return <div className="loader">Loading...</div>;
  // 未到延迟时间时返回空，避免闪烁
  if (loading) return null;
  
  return <div>{user}</div>;
}

同时给Suspense的fallback使用相同的类名：

<Suspense fallback={<div className="loader">Loading...</div>}>

这种方案是视觉层面的优化，本质仍为两次加载，但能大幅降低闪烁感，适合无法重构数据逻辑的场景。

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