@vighnesh153/react-use-global-state

A lightweight library (around 1KB minified), which allows you to create a global state using a ReactJS hook. The API of the hook is similar to the useState hook with minor differences.

Use this library as an alternative to popular state management solutions like Redux, MobX, etc. because you don't need to create any providers or action creators or any boilerplate code for creating a global state. You can even use this in place of the ReactJS's builtin Context API

Installation

1npm install @vighnesh153/react-use-global-state

Usage

1import { useGlobalState } from '@vighnesh153/react-use-global-state';
2
3const Counter = ({ adder }) => {
4  const [count, setCount] = useGlobalState('count', 0);
5
6  return (
7    <div>
8      <p>Count: {count}</p>
9      <button onClick={() => setCount(count + adder)}>Add {adder}</button>
10    </div>
11  );
12};
13
14const App = () => {
15  return (
16    <div>
17      {/** Count state will be same for all counters **/}
18      <Counter adder={1} />
19      <Counter adder={2} />
20      <Counter adder={3} />
21    </div>
22  );
23};

Cleaning up (in your tests)

To remove the global state from memory, you can make use of the forgetGlobalState function which will clean all the global pieces of state. It also accepts an array of identifiers (strings) to only forget those global state pieces.

1import { forgetGlobalState } from '@vighnesh153/react-use-global-state';
2
3describe('Your component tests', () => {
4  // forgets all identifier states
5  beforeEach(() => {
6    forgetGlobalState();
7  });
8
9  // forgets those global state pieces that were marked with any one of these identifiers
10  beforeEach(() => {
11    forgetGlobalState(['counter', 'user', 'auth']);
12  });
13});

Performance

Any change in the state would just render the consumer components (and their children components) and not the entire application as you can see in the following example.

In the following example, we have the global render time in the <App /> component and all the counter cards are children of the <App /> component.

• Adding a new counter re-renders the <App /> component because the logic of the count of counters is in the <App /> component
• Adding 1 to any of the counters only re-renders the consumers of the count state (in this case, only the cards)

Why you should use this library?

• Size: 1KB minified
• Zero external dependencies
• Modern hook-based state management instead of the traditional redux-like, provider-consumer approaches
• No need of wrapping components with a long chain of Providers as there is no Provider-Consumer pattern in this hook

Best practices

• Try to keep the states very minimal. That way, to avoid re-rendering of big component trees with every minor change in the state
• Although there is no restriction on how you want to use this, my recommendation would be to create a wrapper hook around you piece of state and add some utility functions in the hook to update the state. This lets you encapsulate your business logic for this piece of state in the hook, and you won't have to pass the identifier everytime as it will be done for you by the hook.

1const useUser = (userId, initialValue) => {
2  const [user, setUser] = useGlobalState(`user_${userId}`, initialValue || {});
3
4  const changeName = useCallback(
5    (newName) => {
6      setUser({ ...user, name: newName });
7    },
8    [user]
9  );
10
11  const changeAge = useCallback(
12    (newAge) => {
13      setUser({ ...user, age: newAge });
14    },
15    [user]
16  );
17
18  return { user, changeName, changeAge };
19};

How does this hook work?

• This hooks makes use of the provided identifier to identify which global state you want to access.
• When you change the state for an identifier, the new data gets published in a stream and all the components which are making use of the same identifier will get notified about the updates