I have a list component (https://github.com/Shooshte/use-client-timestamp/blob/main/src/app/components/list.tsx) that parses unix timestamps using toLocaleTimeString. After I refresh the app in the browser I get the following error:

Unhandled Runtime Error

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used

- A server/client branch if (typeof window !== 'undefined').
- Variable input such as Date.now() or Math.random() which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

I thought that putting "use client" on top of the component means that the component is always rendered in the browser, but it seems that the server is trying to hidrate my list anyway, and parses the date with a different timezone than what my browser has set?

You can find a repo with the reproduction of the issue here: https://github.com/Shooshte/use-client-timestamp

Thanks for the help, I can't figure out what is going on here.