Since the announcement of experimental , they have taken the React community by storm. Hooks in React 16.7 Unfortunately, the same way class components only manage local state, the built-in React hook only manages state in functional components. Global state management is still left to higher-order components and community-contributed endeavors. useState local The , while also targeting class components, offers a React hook for accessing and managing global state in functional components. The ReactN package intends to integrate global state into React as if it were native functionality. In contrast to libraries like MobX and Redux, which are state-first solutions to state management, ReactN aims to be a -first solution to global state management. [reactn](https://github.com/CharlesStover/reactn#readme) package React To read more about or contribute to the ReactN project, . To install ReactN, use or . the GitHub repository is welcoming to the community npm install reactn --save yarn add reactn A useState Overview 🏁 Analogous to the , the hook of behaves as similar as possible, with a few key differences. To clearly identify these differences, I’ll first provide ’s behavior. built-in React hook [useState](https://reactjs.org/docs/hooks-state.html) useGlobal reactn useState The function takes a default value and returns a 2-item array, where the first item is the state value and the second item is a function that updates that state value. useState const [ value, setValue ] = useState(DEFAULT_VALUE); In the above example, renders an image (because that is the default value of the state). When you click the image, you are prompted for a new avatar URL. The functional component’s state updates with this new URL, and it re-renders (due to state change), displaying the image you entered instead. MyComponent anonymous.png This works great if you want to track the avatar . But what if you have multiple components that display the user’s avatar? Or multiple instances of this same component? Each instance of will have its own instance of state, meaning each instance of can have . In many cases like these, developers opt for a instead — insuring that all components are in sync with each other. In one component updates the user’s avatar, then all other components displaying the user’s avatar need to update too. only in this component MyComponent MyComponent a different state global state Global State Differences 🆚 An important distinction when dealing with global state is how nonsensical it is to have a 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 . Every time you want to change the default value, you have to go through the effort of changing it . 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. default value DRY code on every component Because of this, global state is typically instantiated of the components that use it. If the global state is given a value up front, then the components don’t need to provide a default value in case one does not already exist — it does already exist. outside Instantiating the Global State 🌞 with the helper function. Just provide the state object, and you’re done. With ReactN, you can instantiate the global state setGlobal It is recommended that this occur before , because you want the state to exist before any components attempt to mount. ReactDOM.render typically 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 , 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 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 property, so we will access it here. use property avatar That’s it. We changed to and we replaced the default state value with the property we wanted to access. Whenever the global property is updated by component, components using will re-render with the new value. useState useGlobal avatar any all useGlobal('avatar') Can I access the entire global state? 👪 Yes! If you do not provide a property to , it will return for you to use as you please. useGlobal the entire global state The same as when you provide a specific property, your component will only re-render if you a property, not any time the global state is updated. This may be useful if you want to conditionally subscribe to certain properties. Your component will only re-render instead of every time updates. access if it accesses global.property global.property In the above example, if is truthy, your component will only re-render when the property of the global state updates, when the property of the global state updates. This is because the property of the global state does not impact the render of your component at all! global.x x not y y If the property is falsey, your component will update whenever either or update. This is because both and changes will impact the render of your component. x x y x y The “magic” here is simply that your component re-renders when there is a change in a global state property . Above, if is truthy, the property . The component returns before ever getting the chance. If is falsey, the property accessed. that your component has accessed x y is never accessed x y is If you were to and , you would be accessing both the and properties — even if you were to ignore . As a result, your component would update when the unused property is changed. useGlobal('x') useGlobal('y') x y y y What about Reducers? 🤔 React 16.7 introduced a beautiful hook alongside known as . The hook allows you to pass a reducer function and initial state. It returns the state and a dispatch function. Unlike returned by , the dispatch function passes your arguments along to the reducer function. useState [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer) useReducer setState useState Here is the reducer demonstrated by the React documentation: In the above example, returns the state, which defaults to , and a function that passes your parameters on to the reducer. The reducer takes the current state and your parameters to determine what the new state should be. Since actions such as depend on the current state, the reducer returns the current state plus one. useReducer { count: 0 } { type: 'increment' } Unlike , which takes the default state as a parameter (and a state can a function), takes a parameter that represents the key of the global state object. Since an object key cannot be a function, knows that you want a when you give it a function. The above example using global state would look like this: useState be useGlobal string useGlobal reducer Other than setting the initial value outside the component instance, it’s exactly the same! Summary 📝 Similarities: is a React hook. useGlobal supports reducers. useGlobal returns the current state and a function for changing the current state. useGlobal Differences: 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. useGlobal To install ReactN, use or . npm install --save yarn add reactn Conclusion 🔚 Community feedback and pull requests for improving the React hook, as well as , are appreciated on . useGlobal the plethora of other global state features of the ReactN package the GitHub repository If you liked this article, feel free to give it a clap or two. It’s quick, it’s easy, and it’s free! If you have any questions or relevant great advice, please leave them in the comments below. To read more of my columns, you may follow me on and , or . LinkedIn Twitter check out my portfolio on CharlesStover.com
