Hi everyone,

I am currently having an issue with zustand and Next13. I am getting an hydration error with the code below.
How could i set a value from the local storage in a zustand store without causing an hydration error ? Since it could be different from the default "Kg" value ?

Thanks in advance for any help / clarification 😀

code sandbox:https://codesandbox.io/p/sandbox/nervous-night-mvyq8d?file=%2Fapp%2FweightUnit.ts%3A28%2C1

the error:

Warning: Text content did not match. Server: "kg" Client: "lbs"
Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

code:

import { create } from "zustand";
import { z } from "zod";

const weightUnitSchema = z.enum(["kg", "lbs"]);
type WeightUnit = z.infer<typeof weightUnitSchema>;

type WeightUnitStore = {
  value: WeightUnit;
  setValue: (newValue: WeightUnit) => void;
};

const WEIGHT_KEY = "weightUnit";

export const useWeightUnit = create<WeightUnitStore>((set) => ({
  value: (() => {
    try {
      return weightUnitSchema.parse(localStorage.getItem(WEIGHT_KEY));
    } catch (error) {
      return "kg";
    }
  })(),

  setValue: (newValue) => {
    localStorage.setItem(WEIGHT_KEY, newValue);
    return set((store) => ({ ...store, value: newValue }));
  },
}));