Live data from Hacker News

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

medium.com

211–220 of 335 posts

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

#211

Earlier quoted context omitted.

First time I hear XMLHttpRequest was a mistake. No one is going to sit through a full-page reload on every form validation. Even intermediate solutions that merged (hacked) client-server state failed too. APIs are just better.

The irony is you're posting on HN, which does exactly what you suggest no one will tolerate. How slow is this form submission for you? ;-)

Turn off your JS and upvote something. It becomes substantially less pleasant.

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

#212
post #108

> You can make API calls in your actions just like you normally would Jesus don't do this. Mobx, Vuex, Redux, etc, are about managing application state not about managing application logic. I started making SPAs in 2015 and I also used actions for everything (API calls, auth, etc). It was fine for small projects but then I got to work on a medium sized project and those actions became huge and controlled everything i…

What about redux-thunk? I usually put all me data fetching logic in thunjs and dispatch to regular actions if needed.

I haven't used it but AFAIK redux-thunk allows you add async middleware to redux. I don't see how adding more features to your store would alleviate the architectural problems I've mentioned. If anything it makes you store even a bigger protagonist in your application.

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

#213
post #157

Earlier quoted context omitted.

It's not debatable... Unit tests are for testing individual components of your application (web or otherwise) e2e or integration tests are for testing your application component/lib/api/whatever boundaries

How do you test individual components in isolation if they depend on the global state store?

That's a code smell. 99% of components in a project should rely on props.

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

#214
post #86

Earlier quoted context omitted.

Having everything in global state is cheap if you use Immutable.js data structures. In my experience, Immutable.js the only way to do the global store pattern e.g. Redux without making your app slow to a crawl.

Note that we specifically recommend _against_ using Immutable.js, and that there's many misunderstandings about the hypothetical performance benefits that Immutable.js provides: https://redux.js.org/style-guide/style-guide#use-plain-javas... Instead, we strongly recommend using Immer for immutable update logic, preferably as part of our new Redux Toolkit package: https://redux.js.org/style-guide/style-guide#use-immer…

I spent years with Immutable and discovering Immer was a game changer. Can't recommend it enough.

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

#215
post #184

Earlier quoted context omitted.

> 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. Required fields are typically not the only type of validation required by a form. I think a designer would see the value of client-side validation more easily than a developer. It's not to ensure correctness - it's to give the user quick and actionable f…

> it's to give the user quick and actionable feedback. Right.. But I think often times the difference is pretty overblown. Clicking "save" and getting that feedback in ~100ms is not, in my estimation, worth the massive extra overhead of using a front-end framework, duplicating your validation requirements, etc. If you're google or facebook or youtube or are otherwise printing money, go for it. But for the 99% of web…

I'm with you on the fact that React is overused, but:

> in ~100ms is not, in my estimation, worth the massive extra overhead of using a front-end framework

The phenomenon of change blindness means a 100ms "blank screen" can be the difference between the user recognizing the fact that they've made an error and getting frustrated because they can't tell where the error is. The 100ms reload means if you don't want that to happen, you have to be much more careful about how you design your errors.

It's an easier design problem if the user sees the error appear immediately where their attention is already focused.

https://www.youtube.com/watch?v=bh_9XFzbWV8

I'd argue caring about this is more important for a smaller product where the marginal cost of a single user churning is (probably) much higher.

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

#216
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

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

#217
post #72

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…

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.

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

#218

Earlier quoted context omitted.

The irony is you're posting on HN, which does exactly what you suggest no one will tolerate. How slow is this form submission for you? ;-)

Turn off your JS and upvote something. It becomes substantially less pleasant.

Turn off JS and load an SPA :p

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

#219
Shameless plug, but I created a dumbed down version of redux.

https://github.com/joetex/flatstore/

Most of the difficulty with Redux is managing actions and reducers.

Out of the box, flatstore lets you get/set from anywhere, with component "connect" function to trigger re-renders on data changes.

It's probably only suited for smaller projects, but now you can prototype at the speed of light.

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

#220
post #128
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 think what GP was getting at is that there's a healthy amount of "if all you have is a hammer" mentality going on w/ React/Redux. The tragedy of commons here is that you _could_ conceivably just slap a class at the root of your React tree to implement dark mode, but if one is using something like styled-components, there's a good chance that the library will get in the way of the style cascading semantics that come…

> people still prefer to defer to libraries to do any non-trivial amount of DOM manipulation rather than actually use pure React to do it.

Could you give an example of a commonly-used library that serves this purpose?

Post reply on HN