This Library Could Replace React State Management.
State Management in the URL with nuqs
“React came as a happy framework but with many problems and now we are using hundreds of external libraries to fix React” — YouTube comments section.
Libraries such as Redux, React Query, and many more have been invented to combat the limitations of basic React state management.
The subject of this article is a powerful library called nuqs.
Nuqs is a powerful state management tool that works exactly as useState works but stores the state in the URL.
In this article, we will discuss what nuqs is, why you should use it, and also some limitations of nuqs that you should be aware of.
So without further ado… Let’s dive right in!
What is nuqs?
As the introduction states, nuqs is a state management tool built on React useState with a key difference: Your state is persisted in the URL rather than in memory.
This means your state is saved:
- On reload
- When sharing the URL
- When bookmarking
For example, if you have the following useQueryState definition from nuqs:
import { useQueryState } from "nuqs"
const [name, setName] = useQueryState("name")Then this will be your URL:
http://localhost:3000?name=<name>Once you interact with the UI and edit the name field, your URL will update in real-time to store your state.
Now feel free to reload your page, share it with a friend, or bookmark it for later. It simply works!
Q&A
When a new library like this comes out and threatens to take over React state management, it’s common to have questions and concerns about it.
I have extracted these questions and concerns from this YouTube video from Josh Tried Coding, and we’ll answer them one by one:
Q: “Why can’t you just push things to the URL yourself?”
A: You can, and it’s quite simple to do so. However, the approach you will take is framework-dependent and also team-dependent. Therefore having a single well-documented solution to this problem will help with consistency in the codebase.
Q: “Should you use the URL for sensitive data?”
A: No, URLs are public and shouldn’t store sensitive data. In-memory state management has the same problem, so the best practice is to use cookies and HTTP headers to store sensitive data.
Q: “Why is it not practical to use URLs for complex state?”
A: There are limits on how long a URL can be. This is roughly 2,000 characters on most modern browsers.
Q: “What performance issues arise from not having debouncing?”
A: Constantly updating the URL in real-time, especially for input fields that change for every key press, can cause performance issues. The Nuqs team is actively working on implementing debouncing to solve this problem.
Q: “How does using this approach affect window.history?"
A: The default behaviour when using nuqs is to not push URL changes onto the window.history stack. This means window.history will not be polluted.
Q: “What browser differences can cause issues with URL updates?”
A: Different browsers like Safari will throttle URL updates, so nuqs has a throttleMs parameter to handle this gracefully.
Conclusion
Nuqs is a very cool library, and it handles React State in a very unique and useful way.
If you are dealing with simple state and you want it to persist, nuqs is the perfect library for you.
If you are handling complex state, nuqs may not be the most suitable option.
If you enjoyed this article, please make sure to Subscribe, Clap, Comment and Connect with me today! 🌐
Need a cofounder for your SaaS project? Check out DevMarket today!