如何使用useEffect与useCallback解决Next.js Header重复渲染图片问题

1. 优化组件渲染逻辑，避免无意义状态更新 #

当前useEffect每次组件挂载都会执行，可增加判断逻辑，仅在用户数据未初始化时更新状态，减少不必要的重渲染：

useEffect(() => {
  const storedData = JSON.parse(localStorage.getItem('userData'));
  if (storedData && !userData) { // 仅当userData为空时才更新状态
    setUserData(storedData);
    setDp(storedData.profilePic ? `https://checkkapi.newsarenaindia.in/${storedData.profilePic}` : '');
  }
}, [userData]); // 依赖userData，避免重复执行

另外，React.memo默认仅做浅比较，若Header组件接收的props是复杂类型（如对象），浅比较会误判为props变化导致memo失效。可传入自定义比较函数：

const Header = React.memo((props) => {
  // 组件内容
}, (prevProps, nextProps) => {
  // 自定义比较逻辑，返回true则认为props未变化，无需重渲染
  return prevProps.userData?.id === nextProps.userData?.id;
});

2. 配置图片缓存，避免重复请求 #

浏览器默认会缓存图片，但可通过URL哈希标识强化缓存策略，只有当图片实际更新时才重新请求：

// 假设userData包含头像更新时间戳字段profilePicUpdatedAt
setDp(storedData.profilePic 
  ? `https://checkkapi.newsarenaindia.in/${storedData.profilePic}?v=${storedData.profilePicUpdatedAt}` 
  : ''
);

同时可要求后端配置图片的Cache-Control响应头，设置较长的缓存有效期，进一步减少重复加载。

3. 用全局状态管理统一存储用户数据 #

将用户数据提升到全局状态（如Zustand、Redux或React Context），避免每个组件重复从localStorage读取，减少状态更新触发的重渲染：
示例用Zustand实现：

// store/userStore.js
import { create } from 'zustand';

export const useUserStore = create((set) => ({
  userData: null,
  dp: '',
  initUser: () => {
    const storedData = JSON.parse(localStorage.getItem('userData'));
    if (storedData) {
      set({ 
        userData: storedData,
        dp: storedData.profilePic ? `https://checkkapi.newsarenaindia.in/${storedData.profilePic}` : ''
      });
    }
  }
}));

在Header组件中使用：

const { userData, dp, initUser } = useUserStore();

useEffect(() => {
  if (!userData) {
    initUser();
  }
}, [userData, initUser]);

全局状态仅初始化一次，Header组件无需重复读取localStorage，自然减少重渲染。

4. 统一挂载Header组件到_app.js #

确保Header组件在_app.js中渲染，而非每个页面单独引入，这样组件仅在应用初始化时挂载一次，不会随页面路由切换重复挂载：

// _app.js
function MyApp({ Component, pageProps }) {
  return (
    <>
      <Header />
      <Component {...pageProps} />
    </>
  );
}

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