Unstated Next - Lightweight State Management Library For ReactJS | Part - 1
Last Updated :
06 Apr, 2022
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.
Similar Reads
Unstated Next - Lightweight State Management Library For ReactJS | Part - 3 | Shopping Cart
We have implemented a shopping cart using Unstated Next In this article we are gonna learn how to handle states of more than one component in a React application using Unstated Next.Prerequisites:NodeJS or NPMReact JSSteps to Create the React Application And Installing Module:Step 1: Create a new re
5 min read
Unstated Next - Lightweight State Management Library For ReactJS | Part - 2 | Shopping Cart
In the previous published article, we have explained everything you need to know about Unstated Next that recommends you to read that article if you haven't. In this article, we are going to build a simple shopping cart application having the functionality to add, remove, update and display any item
4 min read
Jotai: A Lightweight State Management Solution for React
React apps require state management, which becomes increasingly important as the app gets more complex. Managing global state or more complicated scenarios frequently calls for additional libraries, even though React provides built-in state management through its useState and useReducer hooks. One s
7 min read
Introduction to Recoil For State Management in React
State Management is a core aspect of React development, especially as applications grow in size and complexity. While there are many libraries available to handle state, recoil has emerged as the fresh, modern approach that simplifies state management without the bloat of more complex systems like R
6 min read
State Management with useState Hook in React
useState is a built-in hook that empowers functional components to manage state directly, eliminating the need for class-based components or external state management libraries for simple use cases. It provides an easy mechanism to track dynamic data within a component, enabling it to React to user
3 min read
How to Use Flux to Manage State in ReactJS?
State management in ReactJS is important for building dynamic and responsive applications. Flux, an architecture for managing state, provides a structured approach to handle data flow and state changes efficiently in React applications. In this article, we will explore the Flux to Manage State in Re
5 min read
Mastering State Management in ReactJS: A Beginner's Guide to the Context API
State Management in React.js is an essential topic as the whole of React counters & controllers work through their states. State is the initial value of the component, or the current value & using state management we can change the value by some specific functionalities using react.js. One s
10 min read
How to manage global state in a React application?
Global state refers to data that is accessible across multiple components in a React application. Unlike the local state, which is confined to a single component, the global state can be accessed and modified from anywhere in the component tree. In this article, we will explore the following approac
7 min read
How To Delete An Item From State Array in ReactJS?
It is important to manage the state in ReactJS for building interactive user interfaces. Sometimes when we work with arrays, we need to remove an item from these arrays. A common use case is deleting an item from an array stored in the component’s state. In this article, we’ll explore different ways
3 min read
How to Update Nested State Properties in ReactJS?
Updating Nested State Properties in React is an important part of State Management. Nested states are objects containing one or more properties as arrays and objects.Prerequisites:React JSState in ReactSpread OperatoruseState hookHow to Updated Nested State in ReactTo update nested state in React we
3 min read