Live data from Hacker News

Things I wish I knew about state management when I started writing React apps

medium.com

221–230 of 335 posts

Re: Things I wish I knew about state management when I started writing React apps

#221
I used redux before switching to Apollo and a query parameters / routing based state management. In Web Applications especially, it makes sense to couple global state to URLs. It makes the page and the current state shareable and brings value (like tabs, filters, pagination etc.). I developed a library based on zustand and immer for this case (called Geschichte). It’s open source https://github.com/BowlingX/geschichte

Most of the use cases I can solve with that, the rest is usually either forms (covered by formik, final-form etc), async loading of data (Apollo) or local state and animations.

Re: Things I wish I knew about state management when I started writing React apps

#222
post #217
post #72

Earlier quoted context omitted.

To me there’s nothing wrong with React, but everything wrong with people using it in inappropriate contexts. For instance, I’ve seen a growing trend of people creating a whole DOM using React JSX so that they can use React’s server side rendering pipeline. tag all the way down. But the actual reactive components make up about 30% of the page. So you’re wasting download and JS processing time (a serious concern on low…

>So you’re wasting download and JS processing time (a serious concern on low end devices) hydrating a lot of elements that won’t even ever change. It’s stupid and it needs to stop. You hydrate the markup because you want to render subsequent state changes in the client. Meaning much smaller downloads (just the relevant data) between route changes and so on.

That’s often a bad bet though. Obviously it depends on what kind of site you’re operating but a lot of places have a very steep drop off after a single page view. If that’s your case then you’re optimising for an edge case at the expense of the majority.

Re: Things I wish I knew about state management when I started writing React apps

#223
post #72

Earlier quoted context omitted.

To me there’s nothing wrong with React, but everything wrong with people using it in inappropriate contexts. For instance, I’ve seen a growing trend of people creating a whole DOM using React JSX so that they can use React’s server side rendering pipeline. tag all the way down. But the actual reactive components make up about 30% of the page. So you’re wasting download and JS processing time (a serious concern on low…

I don’t understand why you would serve up the React library if you’ve already rendered on the server. I use React server side and then serve the static HTML.

Because you still need interactivity of some sort. Even if it’s just a navigation menu.

Re: Things I wish I knew about state management when I started writing React apps

#224
So let me just check that I understand this correctly.

A whole bunch of problems that were "solved" (or at least, had fairly good solutions) in the context of desktop GUI toolkits have resurfaced in the context of application development confined to the web browser.

Almost none of the previous "solutions" are usable, because of the specifics of the theoretically portable "browser platform" for which all this development is taking place.

So instead, an entirely new set of frameworks are slowly being developed to solve the same set of problems that desktop developers worked on 20+ years ago, and are slowly converging on similar approaches?

Is that too cynical, or just about right?

Re: Things I wish I knew about state management when I started writing React apps

#225

I know nothing about state management on frontend, but please make supporting "history back", "history forward" and "F5 reload" use cases easier. It seems to be a hard problem to crack, given how often these simple actions are broken

It's really not a hard problem to crack. In most cases where history navigation doesn't work it's due to nothing more than oversight. It'll generally just be someone doing a JS route transition in an onclick instead of just making a JS routing-aware link with an href.

There are some cases where history is a bit trickier to get right, like infinite scrolling. Some apps have it working, although with varying levels of success in my opinion. The forum software Discourse does a pretty good job: https://discuss.emberjs.com/t/is-the-six-week-release-cycle-...

Re: Things I wish I knew about state management when I started writing React apps

#226

Earlier quoted context omitted.

Can you comment on why people who like Redux on React don’t use it much when moving over to Flutter? I’ve heard “yea, you can use Redux, but don’t” a lot.

Sorry, I have no experience with Flutter or knowledge of how Redux is being used with it, other than having seen one or two random comments where the two names appeared together.

Thanks anyhow. I think part of the difference is javascript doesn't have streams, but Dart does. And that it's recommended to use the tools built in to the lang, but there must be more to it.

Re: Things I wish I knew about state management when I started writing React apps

#227
post #8

What's the deal with the recommendation to use some library for managing forms? I've been working with React almost since its initial release and I've built some pretty complex forms... yet form libraries remain the one thing I've never really seen a need for. At the very least, using something like formik shouldn't be a necessity. There should be some qualifier that it's only really needed for very complex forms. Or…

I'll counter this by saying making forums is my least favorite thing to do in React. Doing it by hand involves a ton of repetitive work. Each form input needs to have its input validated client side (immediate errors), needs to have error messages from server side validation, needs to be accessible, needs to work across all browsers, any sort of drop downs from an input need to have proper a z-index, and state, so mu…

I don't think this is really a counter if you're talking about "3 giant forms each with over a dozens inputs." Yeah that sounds like a good use case to learn a library.

I guess my larger point that might not have been emphasized well enough is that recommending using a form library for _any_ form seems misguided.

Re: Things I wish I knew about state management when I started writing React apps

#228
post #201

Earlier quoted context omitted.

> The server still needs to validate, no? Client input should never be trusted. Server needs to validate, but that doesn't mean client shouldn't validate as well. > I've never seen a form that really benefitted from client-side validation. As long as required fields are clearly marked, I don't really understand the value here. Client side validation is not only about required fields, it's much more than that. Have yo…

> Client side validation is not only about required fields, it's much more than that. Have you ever used a web store where you need to enter your shipping address, credit card info, etc? Address, zip code (or worse, UK style postal code), phone number, email, credit card number - all that needs to be validated. A couple points: 1. The ~100ms between submitting a form and getting error messages isn't that big of a hur…

> The ~100ms between submitting a form and getting error messages isn't that big of a hurdle, in my experience.

The issue here is not the length of time it takes for the response to come back, rather the fact that there is any delay at all. Client side validation code can be synchronous, submitting any validation info to the server makes it asynchronous by definition. State synchronization between client and server is a big enough problem as is, there is no need to add to it.

Consider this scenario: you have typed an email into a field, tabbed to the next field and realized that you made a typo. Our client sent a validation request to the server, and meanwhile you shift-tabbed back and corrected the typo. The server response came back with invalid indication for the already outdated state, what do you do?

This kind of issue is happening in real life a lot more often than you might think.

> HTML5 has validation attributes for forms, which can handle every one of your examples.

There is no input type for credit card number but there is a very basic and easy to implement algorithm that checks the credit card number validity. This alone is worth implementing client side validation, if your application has to handle payments in any form.

> Negative. You can do an ajax call, and re-render part of the page (e.g., the entire pjax-style). This is fast, doesn't cause the "flash" of a page reload, and doesn't require more than a few lines of js to setup.

Double negative. Re-rendering part of the page received via Ajax call obliterates the current state of that page, or worse yet, a part of the page. User started typing and the page reloaded, all their input - and even which field was focused - is lost. This is a very undesirable user experience.

> Again, turbolinks on pjax has solved this problem very well. Just re-draw the bulk of the page. All the simplicity of reloading the page with none of the user pains of actually reloading the page.

It's actually vice versa: all of the pain of actually reloading the page with no real benefit whatsoever. If you are going to reload the bulk of the page, might as well reload the whole page, just to have consistent state. But that brings us to square one: why having all this complexity in the first place? Because we want user interaction to be smooth, quick, and painless. This implies eliminating roundtrip delay, however small it is.

100 milliseconds might not be much but it can easily turn into 10 seconds if the server is overloaded. 10 seconds delay after submitting a _validated_ form to complete sales transation and display a success message is not a big deal, the user has already made a decision and now they're going to see the positive result. Your site is slow == that's ok, I made the purchase anyway.

10 seconds delay to validate form values and display an error message would most probably result in a lost sale. Your site is slow == it's bad, I won't spend my money here.

It's as simple as that.

> I agree. But I don't agree React _benefits_ developer productivity. On the contrary, I think it (and its competitor frameworks) are responsible for a lot of wasted developer time and frustration.

That's a highly subjective assessment. Do you have a way to measure productivity gains or losses? I don't either, just some anecdata.

About a year ago I needed to build an app for my ongoing personal (at some point to be commercial) project. Think a simple portal for adding, editing, and deleting entities. I decided that since it was internal use only, I can ditch the fancieties and do a quick and dirty old style app: server side logic, form submissions, full page reloads, etc. Back to 1999.

I spent a month of evenings trying to get it done, and didn't get halfway before ditching the effort and rewriting it as simple front end single page app + simple back end that exposed stateless API for the client to consume. That took me 2 weeks worth of evenings.

Lesson learned: never again, there's just too much mess with server side HTML templating, state propagation between page loads, form validation, etc etc. I don't even want to think about partial updates that _still_ involve server side HTML templating but combine that with a double dose of state propagation and synchronization. I didn't even get to writing any tests for that server side, simply because abstracting templating code from actual logic code was painful.

It can be argued that I did not use the best server side framework, did not know what I was doing, etc. That's actually my point: if doing old style web apps was so much easier, I should have been able to complete it fast without much sweat, no?

Re: Things I wish I knew about state management when I started writing React apps

#229
This post could more strongly emphasise something important to understand about writing ReactJS applications - taking a declarative approach to the overall application architecture.

Trying to write React applications in an imperative manner (the more traditional approach to programming as opposed to declarative), twisted my head in knots and made things harder and more complex than they needed to be.

What I mean by writing React applications in a declarative manner is:

1: you have a global state in your application

2: the global state includes an object with information about what state the application is in, for example:

    globalState = {
     "DisplayingFormEditUserProfile": false,
     "DisplayingFormViewUserProfile": true,
     "DisplayingSideMenu": false,
     "DisplayingTopBanner": true,
     "DisplayingUserSignedInStatus": true,
     etc etc
    }

3: use React context to manage this state.

4: components decide to display themselves by querying the global state

It becomes easy then for your buttons and links to simply adjust the global state to make things happen. Because React rerenders the application each time the global state changes, you need do nothing explicit (imperative) to drive the application - it all just happens automatically as a result of what actions the user takes - actions that alter the global state.

React hooks and context make this approach very easy and clean to implement/

That's the way I do it anyway - an approach I find makes the entire application easier to understand.

Re: Things I wish I knew about state management when I started writing React apps

#230

Earlier quoted context omitted.

For individuals making small sites, it's absolutely overkill. For my job, with hundreds of developers working on a giant SPA blob with constant feature creep, frameworks like React are a necessary evil to maintain the insanity.

At what point does it stop being a small site and become a giant app? Genuinely curious cus im wondering if i should make the switch.

I think it's about the number of developers involved.

If you have a small team of 3-5 people who understands the architecture as a whole and can keep up with most PRs then I don't think a UI framework is necessary.

However, if you have many teams working on the same project and/or cannot keep up with every single PR merged then I think using a UI framework is a must. It forces you to stick to strict rules. Although you will start writing boilerplate code, it makes the entire application much more modular, and easier to reason about.

Post reply on HN