Simple Setup for Application Wide State in React

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) 

<GlobalState> <App/> </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>  }