mitt VS nuqs

Mitt is a tiny (~200b) functional event emitter library that works perfectly as a global event bus in Vue 3 applications. Let’s see how to set it up.

Great Name: somehow mitt wasn’t taken.

Mitt is a small (200 bytes) library that provides the same functionality. It doesn't have many updates, because it's simply perfect and there are not many things to improve there. It gets the job done. Don't be frightened, if in 2 years npm will say it's 2 years old. This library is just perfect with no bloatware. In the worst case, just copy-paste its code to your app.

The implementation can vary widely depending on the requirements. For our application, we will take a small library that will do almost everything for us:

You can use an event bus for this, looks like they removed this functionally from vue 3 so you'll need a 3rd party package like mitt

then we need to install an external library implementing the event emitter interface, in this case mitt

date-fns and mitt (event emitter) are also frequent helpers, but I'm considering dayjs and nanoevents for these cases.

Not sure I understood the post right, bit you may want to check Mitt. It's popular event emitter package that quite nicely deals with this very issue.

As suggested in official docs you could use mitt library to dispatch events across components.

You can use it mitt library. https://github.com/developit/mitt

🔗 Confira em: https://nuqs.dev/

In the Next.js App Router era, managing URL search parameters should feel like managing simple React state declarative, type-safe, and without boilerplate. That's exactly what nuqs (Next.js URL Query State) delivers.

nuqs[0] is a great (React) library for managing state inside of the URL.

[0] https://nuqs.dev/

Nuqs[0] does a very good job at parsing and managing search params. It's a complex issue that involves serialization and deserialization, as well as complex management of throttling URL updates. It's a wonderful library.

Forms are also complex because they involve many different data-types, client-side state, (client?) and server validation, crossing the network boundary, and so on. These are not simple issues, no matter how much the average developer would love them to be. It's time to accept the problem domain as complex.

I will say that React Server Components are a huge step towards giving power back to the URL, and also allowing developers to access the full power of both the client and the server, but the community at large has deemed the mental model too complex. Especially with forms, it enables you to build complex forms that work with or without javascript enabled, and handle crossing the boundary rather gracefully. After working with RSCs for several years now, I can't imagine going back. I've written several blog posts about them[1] and feel the community should invest more time into understanding their ideas.

I have a post in my drafts about how taking advantage of URL params properly (with or without RSCs) give our UIs object permanence. How we as web developers should be relying on it more and using it to reflect client-side state. Not always, but more often. But it's a hard post to finish as communicating and crystalizing these ideas are difficult. One day I'll get it out.

[0] https://nuqs.47ng.com

[1] https://saewitz.com/server-components-give-you-optionality

I found mitt imported in a file named sync.ts in nuqs package.

You can build abstractions around it and do whatever you want with shallow routing. For simple things it would be okay to use History API directly, but as always web development have many rough edge cases that would pop out at the least expected moment, that said, there is an excellent library out there called nuqs it makes search params first class citizen in Next.js (and other frameworks also!) and makes sure you won't encounter those rough edge cases.

nuqs - literally state manager for search params. If you want to put JSON in search params, this is your choice. It offers adapters for Next.js, React Router. And documentation is awesome.

nuqs offers a more flexible and developer-friendly approach. It simplifies query string handling by providing a declarative API, enabling users to synchronize search parameters with React.state without stress.