Manage global state with React hooks.

A useState Overview 🏁

Analogous to the built-in React hook useState, the useGlobal hook of reactn behaves as similar as possible, with a few key differences. To clearly identify these differences, I’ll first provide useState’s behavior.

const [ value, setValue ] = useState(DEFAULT_VALUE);

Global State Differences 🆚

An important distinction when dealing with global state is how nonsensical it is to have a default value when instantiating the state. If every component that relied on the user’s avatar had to have a default value, then the value isn’t really global: The components would not be in sync with each other, because each one would have its own, different value. You can give them each the same default value, but at that point you are not using DRY code. Every time you want to change the default value, you have to go through the effort of changing it on every component. Not only is that a huge annoyance, but it opens you up for error when one of the components coincidentally is forgotten about during the change.

Instantiating the Global State 🌞

With ReactN, you can instantiate the global state with the setGlobal helper function. Just provide the state object, and you’re done.

Using the Global State 🌎

As mentioned, using the global state is meant to be as straightforward as using the local state. It is a React hook, prefixed with use, placed at the top of your functional component, that returns a 2-item array where the first item is the state value and the second item is a function that updates the state value. Since the default value is instantiated elsewhere, you do not pass the default value as a parameter to the global state hook; instead, it receives the property of the global state that you want to access. The global state is an object of many different values that you may want to manage throughout your entire application, not a single value. In the instantiation example, we created an avatar property, so we will access it here.

Can I access the entire global state? 👪

Yes! If you do not provide a property to useGlobal, it will return the entire global state for you to use as you please.

What about Reducers? 🤔

React 16.7 introduced a beautiful hook alongside useState known as useReducer. The useReducer hook allows you to pass a reducer function and initial state. It returns the state and a dispatch function. Unlike setState returned by useState, the dispatch function passes your arguments along to the reducer function.

Summary 📝

Similarities:

  • useGlobal is a React hook.
  • useGlobal supports reducers.
  • useGlobal returns the current state and a function for changing the current state.

Differences:

  • useGlobal takes an object key instead of an initial value.
  • useGlobal supports both state and reducers with a single hook.
  • useGlobal can return the entire global state by not providing a parameter.

Conclusion 🔚

Community feedback and pull requests for improving the useGlobal React hook, as well as the plethora of other global state features of the ReactN package, are appreciated on the GitHub repository.

Senior front end engineer / charlesstover.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store