index.js

import React, { useMemo, useContext, createContext } from "react"
import { useImmer } from "use-immer"

const initialState = {
  count: 0
}

function makeStore() {
  
  const Context = createContext()
  
  const stateFromStorage = () =>
    JSON.parse(localStorage.getItem("state")) || initialState

  const Provider = ({ children }) => {
    const [state, setState] = useImmer(stateFromStorage)

    useMemo(() => localStorage.setItem("state", JSON.stringify(state)), [state])
    
    const contextValue = {
      state,
      setState
    }

    return <Context.Provider value={contextValue}>{children}</Context.Provider>
  }

  const useStore = () => useContext(Context)

  return {
    Provider,
    useStore
  }
}

export default makeStore()