[claytongulick]

My style with web components solves it really well.

Just have each component maintain it's own state. Class setters work great. If you need the component to update, just call render() in the setter.

It's super simple, encapsulates logic, and brain-dead simple to debug. You know exactly where to go for everything: the component.

I've always felt like react's approach to state management was creating more problems than it solves.

[doradoblank]

How do you handle state that affects multiple components? Like a filter button that affects a list table. In React you just hoist the state up and make both components dependent. If you're managing all state via internal component state, then you need to explicitly pass state between the components. That's okay for simple cases, but in my experience it breaks down pretty quickly. Once you have more than a few components involved, you end up writing your own state reconciliation.

[claytongulick]

There are a few different ways.

One really easy way is to put a custom element at the root of the dom and just add/remove event listeners, maybe one-shot if that's all you need.

I also have a convenient little library called ApplicationState [1], which basically does the same thing but can persist state in indexdb.

Lots of other libraries out there too.

[1] https://claytongulick.github.io/applicationstate/

[gitaarik]

That's why I wrote Lit State, a simple state management lib to use in combination with Lit, a simple web components lib. It works really simple, and it's simple to use. Much more intuitive than React.

https://github.com/gitaarik/lit-state