What is Sharkio?
Sharkio is an API proxy for your development environments. It records all the requests that are sent to your API. It allows you to replay the requests easily. Generate types, documentation, test suites, and interact with your API using AI.
Over the past few months, I have been an active contributor to the Sharkio project, during which I came across an interesting issue that I decided to work on.
The issue was to implement a state management library on the frontend of the project based on React Vite.
The most common library today for managing state in React is Redux, even so, this does not mean that it is a good choice for every project.
A few reasons we didn't use Redux is because it requires more boilerplate code and files compared to Zustand.
Zustand requires significantly less files than a Redux implementation.
Today there are several state management libraries that are popular in React and are a good alternative to Redux-
- Mobx - observable state
- Recoil - async state sharing
- Zustand - simple global state
After research and consultation with the project's maintainer and experienced programmers, we decided to choose Zustand as the library that best suits Sharkio's needs.
The criteria that were important to us in choosing the library are:
- Good and clear documentation
- Easier to implement than Redux
When I started reading about Zustand and researching whether it would be effective for the project, I found that it had many advantages that made me choose it over the other libraries.
Zustand integrates state management with less separations of concern compared to Redux.
The Zustand example:
This shows a simple Zustand implementation with just a store file and component.
The Redux example:
Redux requires more files for the store, reducers, actions, and wrapper components.
The advantages I found in it compared to other libraries:
- Simplicity- Zustand offers a simple and minimalistic API. It doesn't require a lot of boilerplate code to get started. You can define your state, actions, and effects in a clean and concise manner.
Performance- Zustand is designed for performance. It uses a proxy-based mechanism to track state changes, which can lead to faster updates compared to some other state management libraries.
React Integration- Zustand is specifically designed for use with React, and it integrates seamlessly with React components. You can easily connect your components to the store and trigger updates when the state changes.
Flexibility- Zustand is flexible in how you structure your state and actions. You can organize your state and logic in a way that makes the most sense for your application.
Server-Side Rendering (SSR) Support- Zustand works well with server-side rendering (SSR) in React applications, making it suitable for building SEO-friendly web applications. Ecosystem- Although Zustand itself is a lightweight library, it has a growing ecosystem of extensions and plugins that can enhance its functionality and make it even more powerful.
Immutability- Zustand encourages immutability by default. State updates are done by creating a new state object, which helps prevent common bugs associated with mutable state.
In conclusion:
An important conclusion that can be learned from the article is not to be fixed and always use the most popular technologies, but before you use a certain technology, check its compatibility with the requirements of your project.
There are tools that will be more suitable for certain types of projects than just choosing the technology that is most popular
Every popular library has alternatives that are less popular but can be very effective for your project needs.
The full implementation can be seen in PR #123
If you loved this article, leave a comment and feedback below! 💬👇
Top comments (0)