You might have used many state management libraries for ReactJs like Redux, Recoil MobX, and even Unstated but have you ever thought you can manage your entire application state just by using 300 bytes of code. It can possible by using the Unstated-next state management library.
What is Unstated Next?
It is a lightweight state management library built on top of Reacts Context API using which we can manage global state react applications. As our application grows, we add many components, and managing these components and sharing states between components becomes a very tedious task in ReactJS. To solve this problem, many open source communities have developed state management libraries. State management libraries differ from each other in their features. It is therefore difficult to choose one over the other. In this article, we will explain how Unstated-next is different from other state management libraries, how it works, and how you can integrate it into your application.
What are the Advantages of Unstated Next over other state management libraries?
By looking at the above graph we can clearly say that Unstated Next is smaller in size compared to other libraries. and also it is very simple to use, just by writing 10 lines of code we can directly control the global state of our application. Also, it can be used in complex applications (It will be explained in further tutorials). it has more than 50k weekly downloads.
Key points:
- Low bundle size.
- Easy to implement.
- Shallow(quick) learning curve.
- Also can be used in complex applications.
Unstated Next API methods
1. createContainer(custom hooks) Using this method we create a container that will return us Provider and useContainer method. For example, if you are creating a store for users then use should create:
// return { Provider, useContainer }
let userContainer = createContainer(userHook);
- Provider: it is a react component that acts as a provider for application.
- useContainer: using this we can access the fields and methods of users.
2. Provider: It is a React component that allows child components to access the global store of applications.
return (
<Provider>
<ChildComponet_1 />
...
<ChildComponet_N />
</Provider>
);
3. useContainer: It is a react hook that takes CustomContainer as input and returns its field and methods.
let { name, onSubmit } = useContainer(userContainer);
return (
<h1> Name : {name} </h1>
<input type="submit" name="submit" onChange={onSubmit} />
);
Creating React Application:
Step 1: Create a new react app by using the below command.
npx create-react-app example
Step 2: cd into the project directory.
cd example
Step 3: Install a package.
npm i unstated-next
Step 4: run your application using the below command.
npm start
Project Structure: After this, your folder structure looks like this:
Example: This example will create a Post like counter.
