Live data from Hacker News

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

medium.com

61–70 of 335 posts

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

#61

I'm one of those "old dogs" who don't quite get the advantage of using React in the majority of the cases it's used. This article didn't really help... > What makes these frontends complex? State management. The frontend “knows” a lot of things, and these things interact with each other in non-trivial ways [...] Example: dark mode support. For example, say your app has a dark mode. All your rendered components must k…

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.

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

#62
post #47

Earlier quoted context omitted.

React and Redux are for apps. If you can do it with HTML/CSS, you absolutely should. React/Redux are a replacement for what people used to do with jquery or plain JS. They're not for display; they're for complex interaction of the kind that used to require a native user interface (Java Swing, Gtk, Win32, etc). Javascript is a mess, and the DOM is a mess; React makes that slightly less awful. (Redux is an extension to…

I actually write a good bit of React professionally. I'm familiar. I just have yet to see a very compelling case. And the excuse is almost always this nebulous "rich/complex interaction". And.... I just rarely see any good examples of this. The huge majority of apps (web or otherwise) are not video games. They're forms that submit stuff to a server and get a response. There's sometimes a dropdown here or there.... an…

I've worked on a few applications with 'rich/complex interactions' and everyone on the team was opposed to using any sort of JS framework. That was nice because it was relatively easy for anyone to trace through the application as needed.

In my experience if the application state is overly complex then that is a result of the design, and that usually leads to a bad experience for the user.

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

#63
post #26

> Think about the most complex frontends you’ve used. Frontends that made you wonder — “how did they create this”? What makes these frontends complex? State management. The frontend “knows” a lot of things, and these things interact with each other in non-trivial ways. So in my view, state management is the core problem when developing a UI. To build a non-trivial React application, you need to consider state managem…

You got that wrong. Modern JavaScript / SPAs make it possible to implement something like Outlook right within your browser. No (big) download, no clicking through an installation wizard, no fragmentation of versions for a tool, which forces you to be online anyway. I don't get all the hate towards SPAs and JavaScript Frameworks here on HN. Everyone is basically complaining about complexity for applications, which ar…

I find lots of these "requirements" come from developers that are bored with their job and need to spice things up.

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

#64
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 use redux-form and really enjoy it. A modern form UI has a lot of considerations that classic html/css forms do not: * The concept of pristine/untouched inputs * Basic and custom validations * Resetting forms to various states * Prepopulating data based on an API response * Dynamically creating inputs based on UI states. * Normalizing data upon input or submit * Creating wizard/multi-step forms All those implemente…

At one place I was stuck with some React form library (can't remember the name but wouldn't shame either), as well as being stuck on a version of React Router that categorically refused to support some of the features earlier versions used to have.

I tried patching the form lib to update it from React 0.14.1 or whatever we were on way back then, to the new React 16 hotness. I eventually gave up because the code was so generic that I had to patch use-cases I'd never even thought of (good old feature creep).

Meanwhile, our home-grown forms using plain-JS, hooking into graphql, pretty much did the job with only simple abstractions. The same was to be said for the SVG-based clip-path polyfill I wrote to support IE. I had no problem writing a basic, self-contained component for that.

Most of those form use-cases are quite trivial implementations IMO and the complexity comes from working around the dependency's limited API rather than the browser itself.

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

#65
post #47

Earlier quoted context omitted.

React and Redux are for apps. If you can do it with HTML/CSS, you absolutely should. React/Redux are a replacement for what people used to do with jquery or plain JS. They're not for display; they're for complex interaction of the kind that used to require a native user interface (Java Swing, Gtk, Win32, etc). Javascript is a mess, and the DOM is a mess; React makes that slightly less awful. (Redux is an extension to…

I actually write a good bit of React professionally. I'm familiar. I just have yet to see a very compelling case. And the excuse is almost always this nebulous "rich/complex interaction". And.... I just rarely see any good examples of this. The huge majority of apps (web or otherwise) are not video games. They're forms that submit stuff to a server and get a response. There's sometimes a dropdown here or there.... an…

It sounds like you don't see the need for single page applications, which is a larger discussion.

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

#66
post #14
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 felt exactly the same for many years, but when hooks where introduced, I discovered react-hook-form [1]. It just blew my mind how you can write complex forms with validations in just a few lines of code. Give it a try. [1] https://github.com/react-hook-form/react-hook-form

I've been looking for something like that, thanks for recommendation, gonna use it on the next occasion.

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

#67
> URL state: the route the user is on now. Read and update window.location; don’t create a second source of truth

I've seen so much back and forth on this issue during my time developing with React. Intuitively, it seems like the URL should be treated the same way that DOM elements are: as a source of actions that may or may not result in state change - in addition to a reflection of state.

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

#68

I'm one of those "old dogs" who don't quite get the advantage of using React in the majority of the cases it's used. This article didn't really help... > What makes these frontends complex? State management. The frontend “knows” a lot of things, and these things interact with each other in non-trivial ways [...] Example: dark mode support. For example, say your app has a dark mode. All your rendered components must k…

One of the reasons is the difficulty of writing reusable interactive components with server-side rendering such as maps, rich text editors, autocompletes, hover previews, menus.

The components work with data. Let's say you need an auto-complete component - 500ms after the user starts typing it will query the server and get some data back. You can describe the returned data in partially rendered HTML too but the attribute-based descriptions are often quite limited and for ease of use from the JS side you're likely to end up with embedded JSON as a general data description language with unlimited nesting, which naturally leads you to a client-side templating language.

The components are also likely to re-use each other, giving rise to the need for a module system to track those dependencies and make sure they are all loaded when you go to a specific page based on the components being rendered. If you use partial rendering you would also need to ensure to track any components used from the partial html endpoints have their JS included in the page, capturing any of their occurences, making sure to attach the right event handlers to enable interactivity.

Sure, one could ostensibly write a set of components that use JS under the hood and add them to the back-end. They could also write a server-side module system that ensures that the right scripts are included in any page that uses them. They could do all that.

But then that would work only for a single backend ecosystem, such as e.g. Rails. There is no way this component library would be able to compete with a unified client-side ecosystem in terms of features, flexibility or battle-testedness. Additionally, if you want to try a different language on the backend, you won't be able to - unless you're willing to pay the overhead of a secondary service meant to only generate the HTML and manage the JS plugin system.

And all this is before we even consider alternative clients (e.g. mobile)

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

#69

Earlier quoted context omitted.

See the docs for the original Flux Architecture: https://facebook.github.io/flux/docs/in-depth-overview Redux was originally designed as a Flux implementation: https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-ta...

From that Facebook article: Flux eschews MVC in favor of a unidirectional data flow. This is so incorrect. MVC doesn't imply two-way data binding. The whole Flux architecture was based on a misunderstanding of MVC, and is therefore questionable. Most UI frameworks, including iOS, ASP.NET Core, JSP and JSF (Java based frameworks), Ruby on Rails, and Django (Python) are all based on MVC. Why is it that MVC works for al…

> iOS, ASP.NET Core, JSP and JSF (Java based frameworks), Ruby on Rails, and Django (Python) are all based on MVC.

Don't all of those have two-way data binding?

> Why is it that MVC works for all these other frameworks, but doesn't for React?

I think the point is that Facebook found it doesn't actually work well, at least for their use cases. They found a recurring set of bugs caused by two-way data flow, and built a framework to alleviate it.

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

#70
post #5

Bounced around 2 projects in the last 12 months, one Angular and one React, that are using the Flux pattern. It is a real bitch to unit test anything but the individual pieces, which ends up being kind of meaningless.

> unit test anything but the individual pieces

Isn't that the definition of a unit test?

Post reply on HN