Example: 'with-zustand' rerenders unnecessarily often and runs into hydration errors

[N-Ziermann]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:04:44 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T8103
Binaries:
  Node: 19.3.0
  npm: 9.2.0
  Yarn: 1.22.19
  pnpm: 8.9.0
Relevant Packages:
  next: 14.0.4-canary.4
  eslint-config-next: 14.0.4-canary.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which example does this report relate to?

with-zustand

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

The example runs into an hydration error, because it uses new Date() on both the client and server to render the same component.
It also creates unnecessary rerenders, because some of the zustand selectors return a new object on every render and don't use "useShallow()" to prevent rerenders if the required values haven't changed.
It also still contains a target of "es5" in the tsconfig, which, as described in issue #58640, is also no longer required.

Expected Behavior

The example should not run into hydration errors, use zustand optimisations where possible and not have any unnecessary configuration options set by default.

To Reproduce

Start the with-zustand example on the canary branch.

[N-Ziermann]

I've already looked into ways on how to fix the problems I've described, so I'll also create a PR to fix the problems described in this issue.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.