How to use "useEffect" and "useCallback"?

Question

I am making a Nextjs. application and in my app i have a header which contains an image and that image is fetched from a DB..

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

this is my useEffect i am fetching user profilePic from localStorage.
and i am using nextjs page routing and when i routing in my application this header component re renders every time and reloads the image which is i think is not a best user experience..

i tried using React.memo(header) but that didnt work.. is there any solution to this...

Answer 1

I suggest you apply layout.tsx for those pages where you need to keep the header with the user avatar. Then you will not lose state. Reference: https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts

Also you can try any of the state managers to save global state instead of component state. For example, you can use Redux Toolkit for this. Reference: https://redux-toolkit.js.org/