Hacker News new | ask | show | jobs
by zeorin 322 days ago
React is easy, once you understand why

{} !== {}

and that it uses reference equality as a proxy for value equality.

This is why the absolute simplest thing to do is to just memoize all the things (see https://attardi.org/why-we-memo-all-the-things/ for a deeper dive into this approach).

I know that the conventional wisdom (e.g. https://kentcdodds.com/blog/usememo-and-usecallback) is not to do that, but it's worth noting that Kent doesn't actually bring receipts for his claims, and also the discussion is typically limited to toy examples, not huge applications that have the potential for huge cascading renders when anything changes. In my own profiling of real world applications I have found that memoizing everything is not actually a performance regression. And then also consider the React Compiler, which of course does the same, at an even more fine-grained level than any human could be bothered to consistently do by hand.

3 comments

I think we lack the primitives to understand and discuss messy complicated real world frontends. Something about UI state and its coupling to servers, plus time, plus Conway's Law, causes a real messy situation that appears to be much easier to avoid on the backend than on the frontend.

This creates a massive gulf between beautiful simple frontend toy examples and the reality of applications made with those same frameworks when deployed for multiple years and product cycles. I think it is a big part of what fuels shiny framework adoption. You think: "yes, this here is what will resolve the complexity and pains I see in my work codebase", and this is bolstered by your carefully curated personal side projects.

I am personally thinking creating an alternative to the ubiquitous todo app to highlight how different frontend libraries/frameworks/state solutions tackle common problems.

One example could be a form where the validation rules of one field depend on another, where you have to pick an option from a list that is loaded from a server (what do you do when the current value is not among the returned list?), etc.

Why doesn't react switch to doing a more sensible equality check, rather than relying on JS's unfortunate choices? (E.g. value equality for arrays and objects) I feel like this would simplify most existing sensible code.
Comparing objects is quite expensive, JavaScript does not even have APIs for that.
What about the terrible boilerplate and readability issues it causes?