This is a really simple way to do global state in react

authStore.ts

import firebase from 'firebase'
import { SimpleStore } from './SimpleStore'

export type AuthState = {
  loggedIn: boolean,
  user?: firebase.User
}

const authStore = new SimpleStore<AuthState>('auth', {
  loggedIn: false,
})

export default authStore

example-usage.ts

import useAuth from './useAuth'
const SomeControl = () => {
  const [authState, setAuthState] = useAuth()
  
  return (
    <>
      <div>logged in?: {authState.loggedIn}</div>
      <a onClick={() => setAuthState({ loggedIn: !authState.loggedIn })}>{authState.loggedIn ? 'Log Out' : 'Log In'}</a>
    </>
  )
}

SimpleStore.ts

import EventEmitter from 'eventemitter3'

export enum SimpleStoreEvents {
  change = 'change'
}

export class SimpleStore<T> {
  constructor(storeName: string, state: T) {
    this._state = state
    this._storeName = storeName
    this._hydrate()
  }
  private _hydrate() {
    if (typeof window === 'undefined') return
    this._storeKey = `simple_store_${this._storeName}`
    try {
      const json = localStorage[this._storeKey] as string
      json && this.setState(JSON.parse(json) as T) 
    } catch (err) {
      console.error(err)
    }
  }
  private _storeKey: string
  private _storeName: string
  private _ee = new EventEmitter()
  private _state: T
  public get state() {
    return this._state
  }
  public setState(state: Partial<T>) {
    this._state = { ...this._state, ...state }
    localStorage[this._storeKey] = JSON.stringify(this._state)
    this._ee.emit(SimpleStoreEvents.change)
  }
  public onChange(fn: () => void | (() => Promise<void>)) {
    this._ee.on(SimpleStoreEvents.change, fn)
  }
  public offChange(fn: () => void | (() => Promise<void>)) {
    this._ee.off(SimpleStoreEvents.change, fn)
  }
}

useAuth.ts

import authStore from './authStore'
import useGlobalState from './useGlobalState'

export default () => useGlobalState(authStore)

useGlobalState.ts

import { useState, useEffect } from 'react'
import { SimpleStore } from '../stores/SimpleStore'

function useGlobalState<T>(store: SimpleStore<T>): [T, (state: Partial<T>) => void] {
  const [state, setState] = useState<T>(store.state)
  useEffect(() => {
    function onChange() {
      setState(store.state)
    }
    store.onChange(onChange)
    return () => {
      store.offChange(onChange)
    }
  }, [])
  return [state, store.setState.bind(store)]
}

export default useGlobalState