Next.js persistent state with React hooks and localStorage. How to make it work?

Klaudiusz — Sat, 25 Jan 2020 18:45:28 +0000

I'm trying to create persistent state with localStorage and React hooks in Next.js SSR app and everything seems to look good but when I reload page after update my data I'm getting error:

Warning: Text content did not match. Server: "0" Client: "5

What can I do to repair that? This is my code:

//  src/utils/Store.js

import React, { createContext, useContext, useReducer, useEffect } from "react";
import lscache from "lscache";
import Reducer, {initialState as defaultState} from "../utils/Reducer";
const StoreContext = createContext();

const initialState = lscache.get('state') ? lscache.get('state') : defaultState;

 export const StoreProvider = ({ children }) => {

  let [state, dispatch] = useReducer(Reducer, initialState);

  useEffect(
    function saveStateToLocalStorage() {
      lscache.set('state', state) 
    },
    [state]
  );

  const updateStateFromLocalStorage = () => {
    const newState = lscache.get('state') ? lscache.get('state') : defaultState;
    dispatch({ type: "updatefromlocalstorage", newState });
  };

  useEffect(function watchForChanges() {
      window.addEventListener("storage", updateStateFromLocalStorage);
    return () => {
      window.removeEventListener("storage", updateStateFromLocalStorage);
    };
  }, []);

  return (
    <StoreContext.Provider value={{ state, dispatch }}>
      {children}
    </StoreContext.Provider>
  );
};

export const useStore = () => useContext(StoreContext);

Working example in codesandbox:

DEV Community: Klaudiusz

Next.js persistent state with React hooks and localStorage. How to make it work?