Simple Setup for Application Wide State in React

#react #redux #recoil #state

For a lot of useful State Related Hooks, Checkout my Library merced-react-hooks

To quick setup application wide state in your app just make a file called src/GlobalState.js in your react app.

GlobalState.js

import { useState, createContext, useContext } from "react"

// The initial state, you can setup any properties initilal values here.
const initialState = {
    count: 0
}

// create the context object for delivering your state across your app.
const GlobalContext = createContext(null)

// custom component to provide the state to your app
export const GlobalState = props => {
  // declare the GlobalState
  const [globalState, setGlobalState] = useState({})

  // create a function that'll make it easy to update one state property at a time
  const updateGlobalState = (key, newValue) => {
    setGlobalState(oldState => {
      if (oldState[key] !== newValue) {
        const newState = { ...oldState }
        newState[key] = newValue
        return newState
      } else {
        return oldState
      }
    })
  }

  return (
    <GlobalContext.Provider value={[globalState, updateGlobalState]}>{props.children}</GlobalContext.Provider>
  )
}

// custom hook for retrieving the provided state
export const useGlobalState = () => useContext(GlobalContext)

then you just have wrap your application with the GlobalState component in index.js

<GlobalState>
    <App/>
</GlobalState>

then in any component you can use the state. Below is an example of a counter component using the GlobalState.

import {useGlobalState} from "../GlobalState.js"

function Counter(props){

    const [globalState, updateGlobalState] = useGlobalState()

    return <div>
    <h1>{globalState.count}</h1>
    <button onClick={() => updateGlobalState("count", globalState.count + 1)}>Add One</button>
    <button onClick={() => updateGlobalState("count", globalState.count - 1)}>Subtract One</button>
    </div>

}