使用useLayoutEffect通过API更新状态无法在组件绘制前生效

代码示例 #

useLayoutEffect(() => {
  getUser()
    .then(res => setGlobalUser(res.data))
    .catch(err => console.log(err))
})

问题描述 #

getUser是API调用方法，原本期望通过useLayoutEffect在组件绘制前更新globalUser状态，让页面刷新后直接显示用户信息。但实际刷新时，globalUser先为null，页面快速重绘后才展示用户信息。

原因分析 #

useLayoutEffect确实会在DOM更新后、浏览器绘制前同步执行，但其中的getUser()是异步API请求，不会阻塞渲染流程：

1. 组件初始化时，globalUser初始值为null，触发第一次渲染，DOM构建完成但未绘制；
2. useLayoutEffect启动执行，调用getUser()后直接结束，不会等待API返回结果；
3. 浏览器开始绘制页面，此时globalUser仍为null，页面显示空白或默认状态；
4. API请求完成后调用setGlobalUser更新状态，触发组件重渲染，页面才显示用户信息。

解决办法 #

1. 添加加载状态提示
   初始化时维护一个加载状态，渲染时根据状态展示加载UI，避免用户看到瞬间的空白：

   const [globalUser, setGlobalUser] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   
   useEffect(() => { // 异步场景下useEffect和useLayoutEffect效果一致
     getUser()
       .then(res => {
         setGlobalUser(res.data);
         setIsLoading(false);
       })
       .catch(err => {
         console.log(err);
         setIsLoading(false);
       })
   }, []);
   
   // 渲染逻辑
   if (isLoading) {
     return <div>加载中...</div>;
   }
   return <div>欢迎回来，{globalUser.name}</div>;
   

2. 利用本地缓存优化体验
   将用户信息缓存到localStorage，初始化时先读取缓存数据，再用API请求更新最新内容，避免首次渲染的空白：

   const initialUser = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : null;
   const [globalUser, setGlobalUser] = useState(initialUser);
   const [isLoading, setIsLoading] = useState(!initialUser);
   
   useEffect(() => {
     getUser()
       .then(res => {
         setGlobalUser(res.data);
         localStorage.setItem('user', JSON.stringify(res.data));
         setIsLoading(false);
       })
       .catch(err => {
         console.log(err);
         setIsLoading(false);
       })
   }, []);
   

3. 服务端预取数据（SSR/SSG场景）
   如果项目使用服务端渲染（如Next.js），可以在页面渲染前完成API请求，将用户数据注入组件，确保首次渲染就有可用数据，彻底解决闪烁问题。

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