React is actually a bit of an outlier with state management. While it has first-class tools like
To me, the concept of state is vital to front-end development. It’s like components in that way. It’s just shaking out that it’s a smart way to work on digital products. State is our own abstraction of what is happening on a site. It can be whether a sidebar is open or closed, a list of comments data, the details of logged-in users, or anything else that we need to draw and make functional UI.
That’s why it still feels surprising to me that native web components didn’t attempt to tackle the idea of state at all. I’m not informed enough to know why that is, but as an observer, I can see that developers are clamoring to find the best ways to make state work in and across web components. Most recently, I came across @vue/lit by Evan You. That is a microframework for web components that solves templating and re-rendering by using lit-html, and then incorporating reactive state with Vue’s reactivity. Looks pretty cool to me.
I find all this stuff fascinating. In my own work, I bet I’m rather typical. If it’s a small baby thing, I might be up for a roll-my-own pattern. If it’s a medium-sized thing but sorta low-impact, I’d probably reach for the new-and-fancy — and maybe even experimental — takes. But the second I’m doing something big and high-impact, I find way more comfort in picking from the biggest players, even if that sometimes means heavier libraries. 😬
make sure to check out svelte stores.
I like the approach of SolidJS
React’s context is extremely versatile and is what I use for global state. It has the added benefit of being able to be used multiple times to split up all those globals states, separating the user, theme, shopping cart, language etc. So anytime an item is added to the cart it won’t needlessly rerender all the components accessing the user context.
Very interesting! I’m in the process of choosing a method for implementing dynamic components into a content site (static). The links here will help explore further. I didn’t find any prescribed way to do this. So far, I’ve used vanilla Js, but for more involved stuff (client area, subscriptions, etc.) I’d rather use a system I can lean on to build the application part of a site without having to maintain it myself. That without sacrificing too much performance. Still in the searching phase.
datagetters and setters, like this:
Then you select
my-componentor whatever, and do
I’m going to say Sinuous again. One of the things I like best about this library, is the consistent state management – you don’t need two different state management mechanisms for component and application state, it’s observables everywhere. No need to learn any patterns or switch between APIs – it just works.
Not having to choose between dozens of state management libraries in the first place, it’s such a relief.
If you haven’t checked out xstate library, you are missing out.
Xstate is fantastic. Its visualizer is great as well for debugging / verifying your state machine logic.
React very clearly designates itself as a library for creating views and not a framework (like Angular). This is one reason it doesn’t concern itself work app state. Hell you can use React in an Angular app.