Live data from Hacker News

The new wave of React state management

frontendmastery.com

281–290 of 310 posts

Re: The new wave of React state management

#281

Earlier quoted context omitted.

> must share a parent ancestor fetching D for all of them What happened to the whole "service" pattern? Isn't this the core problem it solved for Java in the 90's?

An external service fetcher doesn't have integration with React because the entire tree potentially needs to know when the data changed. Once you write the code to subscribe to those changes where necessary, you've basically invented another state library.

* Service fetcher does fetching and updating store

* Component does subscribing

* React does updating component tree with changes.

If a component wants changes it must subscribe. If not, it doesn't.

If there is a change, subscribed components get updates. If not, they don't.

Responses are (conditionally) cached in the store by its respective service. Any component that wants data just asks the service. Service fetches from the store or remote. I can customize and unit test the the service.

I don't see the overlap in responsibility between any state lib (react or whatever in this case) and the purpose built service.

What is react query's role here ?

Re: The new wave of React state management

#282
post #188

Earlier quoted context omitted.

I'm sorry people are downvoting, because you are correct. SSR (by which I mean Next.js) is the most over-invested in JS tech of all time. It introduces a bunch of crummy DX which never pays for itself from a business standpoint. SSR is only potentially useful for landing pages. In which case you should be using Wordpress or something like Wordpress so you aren't wasting dev resources on something a marketing team sho…

And how exactly do you plan to avoid the flash of white without SSar?

I don’t. Because it’s not worth the hassle, as explained in my comment.

If I did want to avoid it I could send html for a generic loading state in my base html template, which does not require ssr.

If you’re using Wordpress or static site generators for your public facing pages you won’t have the flash, and if your user is invested enough to have made it past the landing page the flash will be a non issue anywhere else.

Re: The new wave of React state management

#283
post #5

For me the issue of state management mostly went away after starting to use React Query. It turned out that the most problematic state was server-side state for me, which is handled very well by libraries built for that purpose. The state that remains is often simple enough that plain old React state management with useState/useReducer is sufficient. A lot of state can be local, and local state is easy to handle with…

Agree completely, React Query has made it so much easier to build any kind of app that deals with server state, stuff that would have been extremely challenging to write in the past is now just a couple of lines and works better than before. I personally like using Jotai (if I just want a better version of React Context) or Zustand (if I need a bit more than that) for “client state” alongside React Query, but I’ve al…

What’s wrong with React Context in your opinion?

Re: The new wave of React state management

#284

Earlier quoted context omitted.

Nothing implicit about react query caching requests. That's the whole point of the library in the first place, otherwise it would just be a fetch wrapper. And having it behave differently from useState is fine, and correct. The library is used to fetch data, not state. Those are two different things

I disagree with the entire premise of the library then, because I consider a shared, global cache to introduce nothing but problems. I like its query and request primitives, but I don't like that they are coupled to the cache.

It’s purpose in my mind is to model server state, which is fundamentally global state.

Are you using it for transient state? What are you using it for that’s meant to change between different parts of the app?

It kind of sounds like your namespace needs to be broader, are you using a singleton where a collection is needed?

Re: The new wave of React state management

#285

Earlier quoted context omitted.

An external service fetcher doesn't have integration with React because the entire tree potentially needs to know when the data changed. Once you write the code to subscribe to those changes where necessary, you've basically invented another state library.

* Service fetcher does fetching and updating store * Component does subscribing * React does updating component tree with changes. If a component wants changes it must subscribe. If not, it doesn't. If there is a change, subscribed components get updates. If not, they don't. Responses are (conditionally) cached in the store by its respective service. Any component that wants data just asks the service. Service fetche…

You’re hand-waving away “subscribing” as if it’s not a time bomb.

The set of possible events any given query might need to subscribe to is massive. Yes, you can build a large app with a pub/sub model but the number of subscriptions runs away from you and it gets really hard to know which of 1000 subscriptions you need to refresh when an association between two random pieces of data is created/deleted.

Associations are where you really get screwed IMO.

That said, despite exploring lots of possibilities I don’t think there’s any perfect way to do this automatically. So while I think you’re hand-waving away a hard problem, I also think your proposed solution is probably one of the better ones.

Still, I don’t think you should pooh-pooh people trying to solve the general problem. It’s a worthy one.

Re: The new wave of React state management

#286
post #2

Mobx solved all of the state problems properly a long time ago.

Yeah when using React (or Inferno, etc) I default to Mobx.

If you like that model, Svelte stores are very close to that as they are really reactive primitives. Honestly I think it was a terrible idea to call them stores.

SolidJS is also built on this idea of using reactive primitives. In this regard it's even better than Svelte as you get true fine grained reactivity.

Re: The new wave of React state management

#287
post #261

Earlier quoted context omitted.

I think this suggests that UI is more complex than API.

Then you've never written APIs that have to do super complex calculations or process huge amounts of data efficiently and reliably. By far the most complex code I've had to deal with has been "back-end engine" type code, even if it was technically part of a desktop application (but wasn't dealing with user interactions).

My point isn't that "all UI is more complex than all API", but that the constraints and nature of UI tend towards complexity (especially incidental complexity) at a higher rate than API programming. As you observed in a previous post, UI engineers struggle to use techniques like end-to-end testing that API engineers use with relative ease. Why is that? My argument is that engineers working in the API space more completely control their problem space in general. Some examples:

- Want to rigorously specify the interface of an application? In API space, we can use an IDL like Protobuf to write a contract of exact input and output types. In UI space, the best we have is plain-english text language called Gherkin.

- Want to record all inputs and outputs made to application to verify them against new version? With network APIs, we can often record all app-level IO in production using network capture; often with negligible performance impact. To do best possible job for deterministic replay, we can actually hook into our CPU if we try hard. UI? Sorry, again we're running on a customer device, unlikely we can apply these technique. At best we may be able to capture some UI change traces on a few devices with spare bandwidth and CPU.

- Having performance troubles? In API space, feel free to buy more hardware, or optimize more tightly to the existing homogenous platform. Oh, maybe application takes a few minutes to boot up and "warm up"; this is fine, we'll use blue-green deploy and replay a bit of the read-only traffic we captured earlier... In UI space? We probably need to consider 2-3 versions of ~5 different operating systems, running on myriad heterogenous hardware, to say nothing of browser issues; where every few weeks Google releases a new runtime with the potential of performance regressions. Slow to boot? Say goodbye to users; we need the app to paint in 1.7 seconds and be interactive in 3.8 seconds, on demand at any time of day.

- Have a problem with teams stepping on each others toes? In API space, you can try to deploy two services (not saying this is good idea, but plenty of people see it as solution to this problem); end users won't know the difference. Try to deploy two separate apps in UI land? End users will be sad.

- Need to handle large amount of data in API? We have low latency access to storage APIs that scale to petabytes. In a UI? We'll need to build an API first to mediate streaming access to that data and store it for us, since we can probably only store a few hundred megabytes locally before we run out of disk. In both API & UI we need to add a local cache, but how do we test local cache provides good experience? This takes us back to testing topic... where API seems to be easier.

An argument from anecdotal experience isn't worth much in this territory; I can easily same the same thing in reverse: the most complex code I've had to deal with is threading the very narrow constraints of contentEditable programming for Notion's rich text editor. Now let's add a dash of "no true scotsman" as well: You must have never written any such complex UI! See? I think this is an unsatisfying approach to the issue (and not one I make in earnest).

Re: The new wave of React state management

#288
post #255

Earlier quoted context omitted.

Exactly. I think people who complains about complexity of some of the tools, just have not worked on the complex webapp(not the webpage) before. Unfortunately these 2 always get conflated.

Those are conflated because on complex webapp developers own the problems with state management, sequencing of methods, concurrency, caching, queueing, categorizing actors, etc. The developers in this set would understand the need to separate these things because they often have to customize it and state management are often not suitable for customization. Meanwhile, most developers don't need to have customized acti…

Yeah. But web developers need to understand, broadly speaking there are 2 very distinct use cases. They NEED to scope whether they are making a webapp which could even be comparable to a native app, or a webpage which is just dealing with some async requests.

That's not the tools' fault.

Re: The new wave of React state management

#289
post #255

Earlier quoted context omitted.

Those are conflated because on complex webapp developers own the problems with state management, sequencing of methods, concurrency, caching, queueing, categorizing actors, etc. The developers in this set would understand the need to separate these things because they often have to customize it and state management are often not suitable for customization. Meanwhile, most developers don't need to have customized acti…

Yeah. But web developers need to understand, broadly speaking there are 2 very distinct use cases. They NEED to scope whether they are making a webapp which could even be comparable to a native app, or a webpage which is just dealing with some async requests. That's not the tools' fault.

> But web developers need to understand

100% this. Though devs in one might not move to the other in short period. So this knowledge should come from outside of their work, which I don't find many in the net.

Re: The new wave of React state management

#290

Earlier quoted context omitted.

Excel is quite complex, but the Excel of 2022 is far more complex than the Excel of 1995, and part of it exists on the web itself, so Excel '22 would be an invalidation of your argument that '95 apps were more complex (as well as other modern versions of the other apps). One major difference in 1995 applications is that almost none of them were collaborative or synced with a remote server. They were all isolated appl…

We certainly had network programming in the 90s. It was just that apps didn't use it unless needed. SGI res was typically 1280x1024 and Wacom tablets were common in studio/professional settings.

Apps didn't use it because it wasn't practical or in high demand yet. People were just getting used to checking email and most people were only intermittently online via dial up. Collaborative apps would take another 8 or 9 years to really start to take off.
Post reply on HN