@vighnesh153/use-global-state

An extremely lightweight library which is just 1KB minified that provides a React hook for having a piece of global state. It is similar to the React's useState hook but with the only addition that this hook persists the state globally.

This can be used as an alternative to the popular state management systems like Redux, MobX or even the built-in Context API. We can completely rely on hooks for handling the state for us.

Installation

1npm install @vighnesh153/use-global-state

Usage

1import useGlobalState from "@vighnesh153/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)}>
10        Add {adder}
11      </button>
12    </div>
13  );
14};
15
16const App = () => {
17  return (
18    <div>
19      {/** Count state will be same for all counters **/}
20      <Counter adder={1} />
21      <Counter adder={2} />
22      <Counter adder={3} />
23    </div>
24  );
25};

Cleaning up for unit testing

You might want to clean up all the existing streams for your unit test suites. You can make use of the resetExistingStreams function to do that.

1import { resetExistingStreams } from "@vighnesh153/use-global-state";
2
3describe('Your component tests', () => {
4  beforeEach(() => {
5    resetExistingStreams();
6  });
7});

Examples

• Counters

Why you should use this library?

• Size: 1KB minified
• Zero external dependencies
• Modern hook-based state management instead of the traditional redux like 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, it will be easier to make reusable and won't re-render lot of components just because some random sub-object changed in the state.
• Although there is no restriction on how you want to use this, my recommendation would be to create a hook that has all the functionality related to the global state you want to track. This lets you encapsulate all the functionality related to the atomic state and will be easily scalable.

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

How does this hook work?

• This hooks makes use of the provided identifier to tap into its global stream.
• When you change the state for an identifier, the new data gets published in the stream and all the components which are making use of that stream, will get the latest data.

Contributing

Pull requests are welcome. For any change, please open an issue first to discuss what you would like to change.

License

MIT