DEV Community

Cover image for Simple Setup for Application Wide State in React
Alex Merced
Alex Merced

Posted on

Simple Setup for Application Wide State in React

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)
Enter fullscreen mode Exit fullscreen mode

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

<GlobalState>
    <App/>
</GlobalState>
Enter fullscreen mode Exit fullscreen mode

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>

}
Enter fullscreen mode Exit fullscreen mode

There you go, now you can share state across your app in an easy that you can customize to your needs.

Top comments (1)

Collapse
 
drifterbob profile image
Rob

This only works after fixing the line..

const [globalState, setGlobalState] = useState({})

to use the initialState instead of an empty json object..

ie
const [globalState, setGlobalState] = useState(initialState)

Excellently useful!