React Native启动报错：组件在同步输入响应时挂起

错误信息 #

ERROR  Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

This error is located at:
    in SplashScreen (created by App)
    in RCTView (created by View)
    in View (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in [AppName](RootComponent), js engine: hermes

你的App组件代码 #

const App = () => {
  const [loading, setLoading] = React.useState(true);

  setTimeout(() => {
    setLoading(false);
  }, 3000);

  return (
      <GestureHandlerRootView
        style={{flex: 1, backgroundColor: COLORS.light.color}}>
        {loading ? (
          <SplashScreen />
        ) : (
          <>
            <NavigationContainer>
              <MainNavigation />
            </NavigationContainer>
          </>
        )}
      </GestureHandlerRootView>
  );
};

export default App;

const styles = StyleSheet.create({});

问题原因 #

冷启动时，React Native的JS引擎初始化和组件渲染处于同步流程中，直接切换loading状态会触发组件挂起（SplashScreen切换到NavigationContainer时可能存在异步初始化逻辑），而React要求这类可能导致挂起的状态更新必须用startTransition包裹，否则会抛出该错误。热重载时环境已初始化，所以不会触发。

解决方法 #

方法1：用startTransition包裹状态更新 #

引入startTransition，将状态更新标记为非紧急操作，避免阻塞同步渲染流程：

import React, { startTransition } from 'react';

const App = () => {
  const [loading, setLoading] = React.useState(true);

  setTimeout(() => {
    startTransition(() => {
      setLoading(false);
    });
  }, 3000);

  return (
      <GestureHandlerRootView
        style={{flex: 1, backgroundColor: COLORS.light.color}}>
        {loading ? (
          <SplashScreen />
        ) : (
          <>
            <NavigationContainer>
              <MainNavigation />
            </NavigationContainer>
          </>
        )}
      </GestureHandlerRootView>
  );
};

export default App;

方法2：结合useEffect优化执行时机 #

将定时器放在useEffect中，确保组件挂载后再执行状态切换，同时清理定时器避免内存泄漏：

const App = () => {
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    const timer = setTimeout(() => {
      startTransition(() => {
        setLoading(false);
      });
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  return (
      <GestureHandlerRootView
        style={{flex: 1, backgroundColor: COLORS.light.color}}>
        {loading ? (
          <SplashScreen />
        ) : (
          <>
            <NavigationContainer>
              <MainNavigation />
            </NavigationContainer>
          </>
        )}
      </GestureHandlerRootView>
  );
};

export default App;

补充说明 #

如果MainNavigation或NavigationContainer内部有异步加载逻辑（比如动态路由、资源预加载），也可以考虑用React.Suspense包裹导航组件，配合加载指示器，但当前场景下用startTransition即可解决冷启动报错问题。

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