wrapRootElement + contextAPI : Page changes cause provider to re-render therefore resetting state.

Summary

I am using React context api and hooks to create a global ‘StateProvider’ however when I change pages my provider re-renders causing me to loose the active state and return to the default.

It is my understanding that using the wrapRootElement method should mean that my stateProvider should persist.

Some advice on how I can debug this issue would be greatly appreciated!

Relevant information

gatsby-browser.js

const StateProvider = require("./src/components/store/store").StateProvider
exports.wrapRootElement = ({ element }) => {
  return <StateProvider>{element}</StateProvider>
}

store.js

const StateProviderContext = createContext()
const DispatchProviderContext = createContext()

const StateProvider = ({ children }) => {
  console.log("init")
  const tocTree = useEntries()
  const initialState = reducer(
    {},
    {
      type: INIT_PAGE,
      value: { pathname, tocTree },
    }
  )
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <StateProviderContext.Provider value={state}>
      <DispatchProviderContext.Provider value={dispatch}>
        {children}
      </DispatchProviderContext.Provider>
    </StateProviderContext.Provider>
  )
}

[dagoss]

@PaulBunker I’m also running into this issue. Can you clarify by what you did to solve this?

Edit: Nevermind. I found this blog post that explains things.

[PaulBunker]

I fixed this problem using the 3rd argument for useReducer() that is used for initialising the state