react-hooks-simple-global-state

Simple global state for React with Hooks, which just depends on React's useEffect and useState.

The idea here is simply to create a kind of useState that shares the information between all the different components that use the same stateName. For this, only the state and lifecycle control of React components with Hooks, associated with the Observer pattern, is used to synchronize the update of all independent states.

NOTE: If you have any difficulty, problem or even suggestion, please let me know here or here.

Install

1npm install react-hooks-simple-global-state

or

1yarn add react-hooks-simple-global-state

Interface

1const useGlobalState = <T>(
2  stateName: string,
3  initValue?: T,
4  listening?: boolean = true
5) => [currentValue: T, setValue: FuncSetValue<T>];

Note that the structure is very similar to React's useState, but here we need to inform the stateName so we can distinguish which global state we want to use.

One important thing that can be noticed about initValue, is that it can have different values in each use of useGlobalState, but only one of them will actually be used, and that will be the one executed first during the rendering of React, that is, it follows the order of the component tree. But you don't have to worry about that, as there are ways to make it even easier, with the following examples.

The listening parameter can be set to false when you don't want to receive state updates. This can be useful when you just want to access the information, for example when you just need to access the FuncSetValue function, this prevents the current component from being updated unnecessarily.

1const useAsyncGlobalState = <T>(
2  stateName: string,
3  funcLoadAsyncData?: () => Promise<T>
4) => AsyncData<T> {
5  loading: boolean;
6  data?: T;
7  error?: any;
8  refetch: () => void;
9};

Here, instead of an initial value, we pass an async function to generate the data. Note that this parameter is optional as we may want to use state only. And note that unlike initValue, here you don't need to have funcLoadAsyncData right on the first call, but it follows the same logic of using only the first place you call with this parameter. That way, if nobody passes this parameter, the state will be loading forever.

The biggest differentiator here with respect to useGlobalState is the return format, because here we are targeting more the asynchronous execution pattern.

Examples of use

You can use it in the simplest and most direct way:

1import React from 'react';
2import { useGlobalState } from 'react-hooks-simple-global-state';
3
4const TabNavigation = () => {
5  const [activeTab, setActiveTab] = useGlobalState('activeTab', 3);
6
7  return (
8    <>
9      <button onClick={() => setActiveTab(activeTab - 1)}>Previous tab</button>
10      {activeTab}
11      <button onClick={() => setActiveTab((currentActiveTab) => currentActiveTab + 1)}>Next tab</button>
12    </>
13  );
14};
15
16export default TabNavigation;

To avoid having to repeat over and over or use constants for stateName or to not have difficulties with initValue, you can centralize this information in a single function:

1// ...
2const useActiveTab = () => useGlobalState('activeTab', 3);
3
4const TabNavigation = () => {
5  const [activeTab, setActiveTab] = useActiveTab();
6  // ...
7};

Another alternative to not having to worry about initValue is to use useEffect, as this guarantees the expected value in the global state:

1import React, { useEffect } from 'react';
2import useGlobalState from 'react-hooks-simple-global-state';
3
4const TabNavigation = ({ initTab }) => {
5  const [activeTab, setActiveTab] = useGlobalState('activeTab');
6
7  useEffect(() => initTab && setActiveTab(initTab), []);
8
9  if (activeTab == null) return 'Loading...';
10  // ...
11};

You may also need to work with asynchronous information, for example requests to an API:

1// ------ In a file:
2import React, { useEffect } from 'react';
3import { useAsyncGlobalState } from 'react-hooks-simple-global-state';
4
5const useUser = () => useAsyncGlobalState('user', () => (
6  fetch('https://.../users/1')
7    .then((response) => response.json())
8));
9
10// ------ In any other file:
11const MyComponent1 = () => {
12  const {
13    data: user, loading, error, refetch
14  } = useUser();
15
16  if (loading) return 'Loading...';
17  if (error) return 'Error :(';
18
19  return (
20    <>
21      {`Name: ${user.name} `}
22      <button onClick={refetch}>reload</button>
23    </>
24  );
25};
26
27// ------ In any other file:
28const MyComponent2 = () => {
29  const {
30    data: user, loading, error, refetch
31  } = useAsyncGlobalState('user');
32  // ...
33};

If you want to use actions(dispatchers), you can do for example like this:

1// ...
2const useDispatch = () => {
3  const [count, setCount] = useGlobalState('count', 0, false);
4  const actions = {
5    COUNT_DECREMENT: (value = 1) => setCount(count - value),
6    COUNT_INCREMENT: (value = 1) => setCount(count + value)
7  };
8
9  return (actionName, ...args) => actions[actionName]?.(...args);
10};
11
12const MyComponent = () => {
13  const dispatch = useDispatch();
14  const [count] = useGlobalState('count');
15
16  return (
17    <>
18      {`count: ${count} `}
19      <button onClick={() => dispatch('COUNT_DECREMENT', 2)}>-2</button>
20      <button onClick={() => dispatch('COUNT_INCREMENT')}>+1</button>
21    </>
22  );
23};

You can create an observer(subscribe) component as follows:

1// ...
2const CountObserver = () => {
3  const [count] = useGlobalState('count');
4
5  console.log(`Current count value: ${count}`);
6
7  return null;
8};
9
10// And you can add it anywhere on the tree.
11const App = () => (
12  <>
13    // ...
14    <CountObserver />
15    // ...
16  </>
17);

Practical examples

• useGlobalState - simple
• useGlobalState - advanced
• useAsyncGlobalState
• Actions/Dispatchers
• Subscribe/Observer