hey there, during the first render, cookieUser is undefined or has a different value. Thus, authUser gets initialized with that value.

Before your component re-renders (or during a subsequent render), cookieUser gets its actual value. However, authUser won't automatically reset to the new value of cookieUser because of how useState works. It retains its initial value.

I think using an useEffect will fix this

that's the thing - cookieUser is 100% not undefined on the first render. I have checked and rechecked dozens of time, and always on the first render cookieUser is correct but state gets set incorrectly

try this
const [authUser, setAuthUser] = useState(() => cookieUser);

That just assigns authUser as a fn tho? Either way I tried and no luck

Sometimes, when there's any computation or possible side effects, you can initialize state with a function to ensure it's set correctly.

Then this might be the potential scenario:

During server-side rendering, cookieUser is correctly passed and rendered.
When the client-side JavaScript loads and React takes over (hydration), a discrepancy between server-rendered content and the initial client render might cause unexpected behavior.


Sometimes, during hydration, certain data is not immediately available or differs from what was available server-side. Ensure cookieUser is being provided consistently both server-side and client-side.

The whole point of the server side bit though is to get the cookie, since it's httpOnly, so it's not possible for me to read the value in a client component unless I provide it, but yeah - that seems to be where things are struggling

However, wouldn't I be seeing a bunch of hydration errors if that were true?

Absolutely, if there's a significant mismatch between what's rendered on the server and what React expects on the client during hydration, you would typically see hydration mismatch warnings in the console. However, not every difference will trigger an error, especially if it's a difference in internal React state and not in the DOM output.

The hydration process can sometimes be tricky. Even though you might not see hydration errors, it's possible there are subtle differences in how the server-side-rendered component is initializing versus when React hydrates it on the client. State initialization is one area where such differences might not directly cause DOM mismatches, and thus not trigger a hydration error, but could still result in differing behavior.

As a test, you can try re-initializing the state once the component mounts:
useEffect(() => { setAuthUser(cookieUser); }, []);
If this corrects the behavior, it's a strong hint that the issue is indeed with the initial state setup during hydration.

that 100% works, but it just feels so hacky :/ i'm probably setting too high a bar haha

One things for sure that it’s an issue with the initial hydration

oops my bad, misread your snippet. That does not work, but it does if I add cookieUser as a dependency

so strange though because cookieUser is used to initialize the state to begin with and it's value is correct 🙃