Hydration failed because the initial UI does not match what was rendered on the server

[duck2913]

I was implementing creating the user store with zustand and then stumbled into this error.

I think that the reason is since we are using SSR from NextJS so the page will be rendered on the server and the server can't access the client's storage

My solution is not to use the userProfle from the useAuthStore hook to render the profile image, but to use a local state myUser

const { userProfile, addUser, removeUser } = useAuthStore();
const [myUser, setMyUser] = useState<IUser>(null);

useEffect(() => {
  setMyUser(userProfile);
  }, [userProfile]);

{myUser && (
  <div className="flex items-center gap-10">
      <button className="flex gap-2 items-center border-2 rounded-md border-gray-300 p-3 py-1 hover:text-pink-700 hover:border-pink-600 transition duration-500">
          <IoMdAdd />
          Upload
      </button>
    .....

I hope this will help anyone who comes across this issue.