如何使用“useEffect”和“useCallback”？

Question

我正在制作一个 Nextjs。应用程序，在我的应用程序中，我有一个包含图像的标头，并且该图像是从数据库获取的..

useEffect(() => {
     const data = JSON.parse(localStorage.getItem('userData'))
     data.profilePic === null
        ? setDp('')
        : setDp(`https://checkkapi.newsarenaindia.in/${data.profilePic}`)
     setUserData(data)
  }, [])

这是我的useEffect，我正在从localStorage获取用户个人资料图片。
我正在使用nextjs页面路由，当我在我的应用程序中路由时，此标头组件每次都会重新渲染并重新加载图像，我认为这不是最佳的用户体验。 .

我尝试使用

React.memo(header)

但是没用。 有什么解决办法吗...

Answer 1

我建议您对那些需要保留标题和用户头像的页面应用layout.tsx。那么你就不会失去状态。 参考： https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts

您还可以尝试任何状态管理器来保存全局状态而不是组件状态。 例如，您可以使用 Redux Toolkit 来实现此目的。参考： https://redux-toolkit.js.org/