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.
Output:
When you should use Unstated Next?
- if your application is small or medium and doesn’t have many state changes, unstated next is the best player. it loads and runs your application much faster.
- if you fetch the data directly from API and display it, also perform a small update operation.
- while using GraphQl for fetching data instead of REST APIs then this is the best option to handle minimum state changes.
When you should NOT use Unstated Next?
- Unstated next is built on top of React Context API, whenever the value of context changes consumer components rerenders. if you have frequent state changes in your application it will re-render the components each time which will affect the performance of your application. but this can be handled by React.useMemo() hook.
- when you are building any editor application it will have frequent state changes then Unstated next is not a good choice.
Conclusion: Before using any state management library understand why you need it. because you’re adding extra complications to your application by introducing state management libraries. Unstated can be used for small applications and even complex applications if you know how to avoid unnecessary renderings. In continuation to this part, in the next tutorials, I will explain to you how to integrate Unstated next to your React application.