soyguijarro / react-storage-hooks

React hooks for persistent state
https://npm.im/react-storage-hooks
MIT License
166 stars 18 forks source link

Warning about props not matching after page reload with SSR #60

Open Bradzer opened 2 years ago

Bradzer commented 2 years ago

I'm using Next.js with SSR.

After saving my form data in local storage and refreshing the page, my form renders with the correct values but I get the following warning, although I'm using a dummy storage object like suggested in the readme: Warning: Prop 'aria-valuenow' did not match. Server: "10000" Client: "11000".

Here is the relevant part of my code:

const dummyStorage = {
  getItem: () => null,
  setItem: () => {},
  removeItem: () => {},
};

export default function createClient() {
  const [formInitialValues, setFormInitialValues, writeErrors] =
    useStorageState(
      typeof window !== "undefined" ? localStorage : dummyStorage,
      "awaji",
      {
        lastName: "",
        firstName: "",
        gender: "male",
        dateOfBirth: "",
        initialCredit: 10000,
      }
    );

  const onSubmit = useCallback((values, actions) => {
    console.log(values);
    setFormInitialValues(values);
  }, []);

// rest of the code...

Any way to properly fix this ?