9 ms·

A Critique of React Hooks

• lpa22 6y ago
  I am disappointed with the React team’s decision to push functional components and hooks as the standard way of working with React. Not sure if the reason is to make React more approachable to newcomers or not, but in my experience leveraging the power of the component lifecycle through class components and decorators is the most fool-proof way to build and maintain large applications. Particularly leveraging shouldCompomentUpdate for performance and componentDidMount/componentsWillUnmount for registering and disposing of component dependencies is very easy to reason about and scale.
  • jimbob123 6y ago
    It's a different way to do things. You can still use Class based components to your heart's content.
  • efdee 6y ago
    The reason they introduced hooks was exactly that component lifecycle and decorators/higher order components were found not to scale well in larger codebases (as experienced by the people using React at Facebook). The useEffect pretty much provides a direct replacement for componentDidMount/componentWillUnmount. I'm still on the fence, but so far it seems to me that using hooks makes my intent clearer than using the various lifecycle methods.
    • didericis 6y ago
      Can you provide links to articles where react devs detail the scaling issues? I've found HOCs easy to combine and reason about if I name them carefully, and am still using them on personal projects. When people complain about HOCs not scaling well, are they primarily complaining about name collisions, or performance issues due to deeply nested components/lots of render calls?
      • acemarke 6y ago
        It's primarily about naming collisions and indirection. I covered some of the tradeoffs in this post and talk: https://blog.isquaredsoftware.com/2019/07/blogged-answers-thoughts-on-hooks/ https://blog.isquaredsoftware.com/2019/07/blogged-answers-th... https://blog.isquaredsoftware.com/2019/09/presentation-hooks-hocs-tradeoffs/ https://blog.isquaredsoftware.com/2019/09/presentation-hooks...
• tenaciousDaniel 6y ago
  IMO, we've traded the complexity of `this` with the complexity of hooks. Maybe I'm weird, but I never really wrote JS that caused scoping issues, so I never found `this` to be a problem. At the very least it's a complexity that is internal to the language itself. Hooks just feel so weird and alien to JS. I find them very, very difficult to reason about. - difficult to reason about except for a few simple use cases. The developer experience is nice if what you're doing is basic. But if, for example, you're aiming for 100% code coverage, unit testing hooks is an absolute nightmare.
  • efdee 6y ago
    Hooks weren't invented because of 'this' complexity though, but rather as a better way to handle reuseable code (somewhat) akin to mixins.
    • tenaciousDaniel 6y ago
      I'll see if I can find the link, but I recall seeing some references in the official docs, naming `this` complexity as a key inspiration for looking to hooks as an alternative to stateful classes.
      • grumple 6y ago
        That complexity was largely avoided by using arrow functions.
      • genezeta 6y ago
        It's right there in their intro to hooks in the section "Classes confuse both people and machines" [0]. [0] https://reactjs.org/docs/hooks-intro.html#classes-confuse-both-people-and-machines https://reactjs.org/docs/hooks-intro.html#classes-confuse-bo...
        • efdee 6y ago
          That is about a lot more than just 'this' confusion though.
• rglover 6y ago
  From what I've learned using them, hooks are a tool like anything else—pushing one method as "the" way means that you make a lot of poor engineering decisions. Hooks are like a screwdriver; great for simple stuff when you want to reduce code overhead. Sometimes you need a power drill, though, and classes and the old-school lifecycle functions are wonderful for that.
• draw_down 6y ago
  I don't think this is a great critique, simply because the pain I've encountered using them isn't mentioned here. The incompatibility with class components is what it is, they're different programming paradigms that you have to choose between. If your library leaned heavily into HOCs, that was an unfortunate choice and I'd recommend making a new library because HOCs were always unwieldy and had problems with composition. Nothing to do with functional components or hooks really, just a very heavy pattern that can typically be done better with another approach like render props. I guess I see a lot of this as evolutionary. It's unfortunate that there has been so much change, and the timing might not be great for some projects, but I would not prefer a world where I was still writing and using HOCs and class components. In my day job I work on a pretty old (in React years) project, and we haven't had trouble writing new code in a functional + hooks style. Still plenty of class components abound.
• runawaybottle 6y ago
  A lot of times I just use a simple React class. The author’s lookup map to return a lookup of other hooks, yikes. A class component would probably solve that in a more predictable way. Don’t feel dirty for doing things simply. If your functional component has entire lookup maps for hooks, it’s probably too complicated as a standalone functional component to drop hooks in.
  • efdee 6y ago
    It's hard to reason about without an actual real-life use case, but the lookup thing he's doing looks extremely convoluted to me.
    • draw_down 6y ago
      Agree, I don’t know what is going on there but it sure smells like something you shouldn’t need to do.
    • WorldMaker 6y ago
      Right, I'd be curious to know a lot more details of the real-life use case that inspired that. My gut feeling says that there's maybe a state machine of some sort which could possibly be split into a sequence or maybe hierarchy of smaller components, but it's hard to tell specifically what the alternative might be without more details on why they thought a lookup table might be useful.
    • jiofih 6y ago
      Once you start using Context everything has to become a hook to be able to consume it, I bet that’s what’s goin on there.
• lucideer 6y ago
  The reaction to react hooks has been (as far as I've seen) a little too positive, so I was looking forward to read a genuine critique. However, I'm disappointed. In reverse order: > 5. They Complicate Control Flow A set of contrived examples, within which the only genuinely confusing part is not related to React at all. It's Javascript's object non-equality ({ multiplier: 5 } !== { multiplier: 5 }) > 4. The Rules of Hooks Limit Your Design This is an interesting section but seems to point to a pattern that would lead to serious issues given any library/paradigm. It's criticising the Rules for their inflexibility, but in this instance they're helping you by pointing out the pitfalls of your approach, and encouraging you to rethink it. An alternative way of looking at it is that it's again (like in 5) bemoaning Javascript's object inequality which is prevening the memoization here. The other 3 bullets are pretty silly "boo new things" issues that are common to migration to any new API.
  • dgritsko 6y ago
    Agree, "More Stuff to Learn" isn't really a critique of hooks, it's a critique of learning.
    • nicoburns 6y ago
      Yeah, I don't really get this criticism in regards to hooks. I think it took me maybe an hour to learn them. That's basically nothing.
      • lucideer 6y ago
        I've never* used hooks and I only got 1 question wrong in the author's Google Forms quiz (would've been 2 wrong, but bullet point 4 had already signposted the object equality gotcha). So there doesn't seem to be a huge amount to learn in hooks as far as I can tell. * I am an experienced React developer but haven't had much opportunity to work with it in the past 2 years.
    • lhorie 6y ago
      TFA addresses this: it qualifies by saying learning is good as long as it's useful outside of whatever narrow scope they appear. The real criticism in that section is that hooks (and e.g. gotchas related to things like useEffect, stale closures, etc) are non-transferrable knowledge.
• joonhocho 6y ago
  I was skeptical towards hooks when it was first introduced. I was hesitant to use it. Then, I used it for a few components in my projects. I realized how much simpler my code looked, and migrated completely to hooks. No regrets.
• ttty 6y ago
  Hooks are magic with new rules that are different from regular JavaScript. They don't follow the regular flow you'd expect it would. Requires devs to think a lot about hooks to make sure something is messing them up. Also needing eslint to make sure your code is ok, is a boy flakey. Hooks it's like learning a new language pretty much, which is only useful for react. I'm using them because of lack of better things.
  • frosted-flakes 6y ago
    Once you understand that function components aren't simple, contained functions but rather components that exist in a parent scope (React) and that React actively manages them, it's not magic at all. Also, you don't need ESLint; the rules are pretty simple.
• azhu 6y ago
  All of this reads akin to someone criticizing an apple for not being an orange. Every point is an intentional design decision. Learning new things is necessary, leaving class syntax behind was a choice, and imposing limits on (controlling) application design is the point of libraries. The team is pushing a functional declarative pipe method of building UI applications where things are built using a straight-line series of composed functional transformations. Personally, I think supporting this method with the hooks model of handling side effects is an improvement over everything else that exists in "roll your own" UI library land. I find these style libraries more enjoyable to build with, more expressive, and better suited to building things where you need finer grain control than template style libraries like Vue, which provide a stronger degree of predictability and ease of immediate use. That's the thing -- it's a balance. Hooks add a nicely considered and balanced degree of order to the otherwise intentionally uncontrolled-so-you-can-do-the-controlling programming model of React. React identifies as the advanced lego set with the smaller more numerous blocks that you can build the cooler stuff with, and as such will always have a certain threshold of complexity.
  • jiofih 6y ago
    You didn’t actually counter any of the authors’ points. This wonderful functional declarative pipe method of building UI applications where things are built using a straight-line series of composed functional transformations can really suck in real world applications as he tries to demonstrate. Anyone building with hooks now can relate to hooks bringing disorder to the codebase. Has your experience been different? How did you avoid the pitfalls mentioned?
    • ng12 6y ago
      Well #2 isn't really a pitfall, for starters. I have a new feature that solved a problem I had but I can't use it in the code I wrote before I had it without refactoring? I don't think that critique really has anything to do with Hooks, just software development. It's also basically a rephrasing of #3.
      • jiofih 6y ago
• jasonkillian 6y ago
  Hooks are great for simple use cases like `useState`, `useContext`, some uses of `useRef`, etc. and can make the code easier to read and reason about (while conveniently working very well with TypeScript). The rules do start to get really tricky though with complex use cases of `useEffect` and multiple levels of nested hooks, and implementation problems are often not easy to spot or debug. Dan Abramov has written a lot about the philosophy of hooks[0] at his site overreacted[1], I'd love to see a 'retrospective' write-up from him or another React team member about what they think the success and failures of hooks have been so far and if there are any changes planned for the future! [0]: https://overreacted.io/why-isnt-x-a-hook/ https://overreacted.io/why-isnt-x-a-hook/, https://overreacted.io/algebraic-effects-for-the-rest-of-us/ https://overreacted.io/algebraic-effects-for-the-rest-of-us/, https://overreacted.io/a-complete-guide-to-useeffect/ https://overreacted.io/a-complete-guide-to-useeffect/ [1]: https://overreacted.io/ https://overreacted.io/
• mstudio 6y ago
  I have some similar gripes. I find Hooks to save a bit of coding overall. I've found my functional components to be about 10-20% smaller than my class components. I'm not 100% convinced it's really worth it, though. With class components, my state/props are clearly defined within the constructor and/or PropTypes. This makes it easy to understand the overall architecture of a component. Functional components with Hooks don't have the same sort of structure and can be difficult to understand at a glance. One of my gripes with Hooks is that listening for async state updates requires more code/complexity than w/classes. In a traditional class component, you can add a second, optional argument as a callback which is called when the state has updated: setState({ myState: 'newValue' }, () => { this.doSomething(); }); With Hooks, that doesn't apply. The useState "set" function doesn't have a similar argument. setMyState('newState'); Instead, you need to use 'useEffect' with an optional argument: useEffect(() => { doSomething(); }, [myState]); This leads to potentially having many "useEffects" scattered throughout the component. That said, this is just my experience with Hooks after a few months of working with them. It's entirely possible that I just haven't had enough experience with them yet.
  • eat_veggies 6y ago
    Having a separate useEffect certainly scatters your code, but it helps prevents bugs that cause your states/effects to go out of sync. If you use a callback on setState in order to listen for async state updates like setState({ myState: 'newValue' }, () => { this.doSomething(); }); then a week later, when you add some different code calling setState({ myState: 'newValue' }) somewhere else without remembering to add the callback, your callback won't run! Callbacks kind of break the declarative/reactive model.
  • city41 6y ago
    Components with lots of hooks in them remind me of spreadsheets. I find myself tracing from one hook dependency array to the next, trying to follow the logic.
  • bryik 6y ago
    > With class components, my state/props are clearly defined within the constructor and/or PropTypes. What do you mean? PropTypes work just as well with functional components as they do with class components.
• zodiac 6y ago
  I personally don't use hooks (or functional components) at all, but recently read this post from Dan Abramov about algebraic effects which makes a point (among others) the hook mechanism is a pretty simple way to implement state/effects/context in a language with algebraic effects. https://overreacted.io/algebraic-effects-for-the-rest-of-us/ https://overreacted.io/algebraic-effects-for-the-rest-of-us/
  • jtdev 6y ago
    Yay, just what we all needed to help us write clean, maintainable code... algebraic effects??
    • zodiac 6y ago
      Honestly? Maybe it is, maybe it isn't. Imagine replacing "algebraic effects" in your question with "exceptions" - theres no clear answer. What do you think?
• sebringj 6y ago
  My take away from hooks is that it is pushing toward making your components simpler. One of the gotchas of hooks is that it kind of "lies" in the way it looks. Take useRef or useState for example. These things are only defined one time even though the are declared in such a way to look like they are defined over and over again each render. They are actually key lookups under the hood. This was a main point of confusion for me initially and I'm sure I'll find out more that I assumed incorrectly as I go. Auto-magic sometimes is confusing to me.
  • karatestomp 6y ago
    They behave like class property & method declarations. But scattered about in a function and looked up by order rather than name. This is exciting and not considered redundant and obviously a bad idea, for some reason.
• ramoz 6y ago
  React is great at rendering data. It should've stopped there.
  • roosterdawn 6y ago
    After using `ember` and the wonderful `ember_data` at $PREVIOUS_FIRM, I wholeheartedly agree. React is good for what it's good for, but the community sadly did not stop there.
  • tannhaeuser 6y ago
    JavaScript is great at small-scale manipulation of DOM elements in response to user events. It should've stopped there.
• andrewingram 6y ago
  I mean, I got full marks on the quiz in the article. I had to think about the code, but no more than if the same had been implemented as classes. I have been using React for a very long time though, but the areas where execution order can be confusing aren't a problem new to hooks. One criticism of the article is that it seems to argue that you lose the ability to provide HOC (and probably render-prop) APIs if you adopt hooks in your library. But it's fairly easy to automatically turn those types of hooks into HOCs, so it actually makes sense to have the hooks API be the primary one. You can't really do it the other way around, i.e. turn a HOC into a hook.
• dcre 6y ago
  An important point I don't see being made in the article or the comments is that hooks are meant as a more faithful (or at least less misleading) representation of what was going on under the hood in React already. The problem with the JS class representation is that people already understand what classes and instances are, and that leads to incorrect inferences about how React is working. In addition to better-organized code, the hooks abstraction is partly aimed at preventing people from making those wrong inferences. This also explains why they are uncomfortable compared to classes and functions — the point is that was a false comfort because those representations are misleading. Dan Abramov calls hooks a "missing primitive": "Why are these models insufficient to describe React? “Pure function” model doesn’t describe local state which is an essential React feature. “Class” model doesn’t explain pure-ish render, disawoving inheritance, lack of direct instantiation, and “receiving” props. What is a component? Why do you start writing it one way and then have to convert into another way? Why is it “like A but also like B”? Because it’s neither. It’s a thing of its own. A stateful function with effects. Your language just doesn’t have a primitive to express it. That’s what Hooks are. Those missing primitives. They are library-level but conceptually they are part of the “React language”. Hence the language-like “rules”. They could be syntax. They would be in Eff or Koka. But the benefits are not worth the friction it creates in JS." https://twitter.com/dan_abramov/status/1093696560280596491 https://twitter.com/dan_abramov/status/1093696560280596491 https://twitter.com/dan_abramov/status/1093697963350810624 https://twitter.com/dan_abramov/status/1093697963350810624 https://twitter.com/dan_abramov/status/1093698629708251136 https://twitter.com/dan_abramov/status/1093698629708251136
  • Saaster 6y ago
    As a user of a library, I don't really care how it works. Under the hood it can be arbitrarily complex or simple, and please feel free to change the implementation weekly for all I care. I care very deeply about my own components, when they render, what causes them to re-render, and that I can control and reason about when they re-render. Also, stability of API (in number of years) is way more important than new whiz-bang features.
    • deleted 6y ago
      [deleted]
• twic 6y ago
  I learned about Crank today: https://crank.js.org/blog/introducing-crank https://crank.js.org/blog/introducing-crank Crank itself is interesting, but what's relevant here is the broader critique of React there.
  • wk_end 6y ago
    This is really compelling - thanks for linking it. Is there a downside here? Has React responded at all? I don’t hate hooks, but using async + generators like this looks so obviously better and more intuitive here; like such a clearly great, simple idea that I’m embarrassed I didn’t ever think of it myself.
    • aero142 6y ago
      There was a lot of discussion in the Crank thread. Essentially, concurrent mode is the primary goal. https://news.ycombinator.com/item?id=22903967 https://news.ycombinator.com/item?id=22903967
• sibeliuss 6y ago
  It's unreal that in React I have to deal with occasional infinite loops now because of hooks. Sure, React catches the loop cycle so things don't totally freeze but I don't recall ever having to deal with this before them. Weird, unexpected reference issues, missing dependency accidents requiring linters to prevent, strange programming patterns, a team member having to write a terrifying novel like https://overreacted.io/a-complete-guide-to-useeffect/ https://overreacted.io/a-complete-guide-to-useeffect/ for something that was never really a problem before. The list goes on and on.
  • exogen 6y ago
    The problem before was that your class component was not updating correctly and rendering stale & out of sync data. If it were updating correctly, it would have had the same infinite loop problems.
    • ng12 6y ago
      Exactly this. Class components let you cheat and easily write components that were broken if a prop was unexpectedly updated. Hooks will surface this immediately.
  • dgritsko 6y ago
    You could easily wind up with an infinite loop without hooks (for example, by calling `setState` in `componentDidUpdate`).
    • jiofih 6y ago
      That would be trivial to spot. Not the case with hooks.
      • deleted 6y ago
        [deleted]
      • torartc 6y ago
        It's trivial to spot with hooks.
• city41 6y ago
  Overall I think hooks are a fine addition to the React toolbox. But I think they are very easy to overuse and the complexity of hooks seems to increase exponentially. I've been involved in two code bases now where hooks are just everywhere and they were both an absolute nightmare. But I've also been involved in code bases where hooks are used more sparingly, about on par with when HoCs were used, and it's rather pleasant. In general, the more "dumb" components your app has, the more manageable it seems to be overall.
• Saaster 6y ago
  I feel that with class components I have a really good understanding of what is rendering and most importantly, when. componentDidMount, shouldComponentUpdate, PureComponent, etc. With hooks, it's much more magic. And clarity of rendering is literally the one thing I want from React. We have two projects, one using class components and one using hooks, and working on the class components one is unexciting, straightforward, sometimes repetitious, but never confusing. When writing hooks on the other hand it's constant gotchas; can't do that here, didn't memoize this, can't call that within this, etc. fuzzing until it works as Reacts expects. And then the bloody thing still renders on every frame. Back to the drawing board to figure out the right magic incantation. Probably memoize a few more layers, ugh.
  • pacala 6y ago
    Memoization is getting me too. I end up memoizing everything, which is more verbose than I'd like. Perhaps we're missing some obvious pattern?
    • hombre_fatal 6y ago
      Though note that React.memo(Component) gives you the same behavior as React.PureComponent which is what people were tending to default to anyways.
  • throwaway286 6y ago
    This is how I feel too, and I'm a confused how the reaction to hooks is so overwhelmingly positive. I find it quite strange that we need to set up an eslint rule to make sure our function arguments are correct, and it will automatically fill them out if we don't. And I need to memoize so many things! I feel like I'm not even writing javascript anymore.
  • JMTQp8lwXL 6y ago
    This is the most legitimate criticism I've seen in the discussion. Hooks give you more control. 'useEffect' will only re-run when any value in the dependency array is updated. In class syntax, you have 'componentDidUpdate', but that function gets called after any prop or state change. With hooks, there is more granularity. Personally, I've found reasoning about hooks to be a learning curve that was conquerable in about a week. But there is no arguing, it requires you to mentally reason a little bit further than the blunt 'componentDidUpdate'.
• abuldauskas 6y ago
  My only issue with Hooks has been that they are not inputs into the component. It's a step in the right direction of making React more functional I would just preferred less magic, personally. function Component(props, { useState, useContext }) { ... } Of course that would break backwards compatibility with the old 2nd argument being context, so I get why they did it.
  • frosted-flakes 6y ago
    That's not the only problem with your approach. It is extremely common to use the output of one hook in the input of another, and that's only possible if the hooks exist in the function body.
    • abuldauskas 6y ago
      I don't really understand how this approach breaks what you are describing. All I'm saying is that instead of hooks API being imported from React at global scope it could be provided as inputs into the components directly. They would still exist in the function body as you put it.
      • frosted-flakes 6y ago
        Oh, I thought you meant that the hooks would be called there, which was one of the many alternative proposals made after hooks were announced. In any case, it still wouldn't work because hooks are composable. You can create your own custom hooks outside of components which can be used as if it was one of the primitive hooks. That's not possible if the primitive hooks can't be accessed outside the component scope, unless they're passed in as parameters every time the custom hook is called (and that would be a right pain in the backside).
• bobblywobbles 6y ago
  This is why I avoid hooks. I design my components to use state and I find hooks to not fit well in my applications.
• deckard1 6y ago
  Hooks elucidate everything I've felt wrong about React, but have not been able to put my finger on it until recently. Hooks reveal two major things with React: 1) React developers did not understand the component paradigm that they originally went with. If they did, then they would understand how silly it is that components cannot reuse logic. This was an entire debate many years ago. Composition vs. inheritance. You don't need to throw out classes or objects to get reuse. 2) React developers do not understand functional programming. I could write an entire essay on this. But it should suffice to say, FUNCTIONS DO NOT HAVE STATE. What React hooks introduce has more in common with dynamic scoping, of older LISPs. It fundamentally breaks lexical scoping, which is incredibly important for understanding code flow. You have to be constantly aware of when it's safe to use certain variables and the implications of using variables in certain scopes now. In 2020!! This is INSANE.
  • hombre_fatal 6y ago
    > they did not understand > they do not understand > This is insane This sort of post that asserts that nobody understood or put delicate thought into something is just pompous and lacks intellectual curiosity. At least respond to their rationale. In doing so, you’ll find that everything is just trade-offs. btw Dan Abramov is great to follow on twitter. He often responds to criticism and clarifies React decisions and links to good blog posts. If you use twitter it’s a nice way to get polite, bite-sized wisdom about React and Javascript. At the least you’ll realize how much good thought goes into React.
    • jiofih 6y ago
      It fares well next to all the other comments saying this article is “pure whining”.
  • psmyrdek 6y ago
    RE: 1) "it is that components cannot reuse logic" - +1 to this - recently I re-watched original hooks talk by Dan Abramov and was not able to finish it with conclusion different than "you guys really fix issues you invented before". Class-based components and reusability of logic is something that existed years before React, and probably will exist years after React. Even this concept of Dependency Injection and Services that Angular is still on proves that there-are-solutions. There are solutions for reusing logic between classes. Thing that bothers me the most is not that there's something wrong with fixing your own issues, but the fact that developers outside React Core Team start to think that "well, you cannot reuse logic between components".
• deleted 6y ago
  [deleted]
• psmyrdek 6y ago
  There's yet another valuable hooks critique that I recommend you to read - https://typeofweb.com/wady-react-hooks/ https://typeofweb.com/wady-react-hooks/ (Use Google Translate to convert Polish to English)
  • lioeters 6y ago
    Hahah, this is good. > React, like socialism, perfectly solves the problems that it created.
• Saaster 6y ago
  My biggest worry with React is that it has restless developers with idle hands. I have (a lot of) component code that will never be converted to hooks. Can I rely on you not to flake out and pull an Angular on me?
  • karatestomp 6y ago
    > My biggest worry with React is that it has restless developers with idle hands. That’s exactly what I take hooks as a sign of. I read the papers and the code when they came out. I still don’t get why they exist except to provide churn to work on. A half-reimplementation of objects with a super weird syntax in a language that already has objects seems like misguided make-work on a project that’s already basically “done” except for the boring, non-flashy work of maintenance and subtler improvements.
• jwr 6y ago
  ClojureScript user here, with a big SaaS app using React, developed over the last 4 years or so, using the excellent Rum library, https://github.com/tonsky/rum https://github.com/tonsky/rum. It seems to me that React Hooks, like so many things in the JavaScript world, solve a problem I do not have. To this day, despite being a heavy user of React, I don't even fully know what they do. I've read the "Motivation" section of the React Hooks Intro, and it seems that I have none of the problems they describe: I can (and do) easily add stateful logic via Rum mixins, and that logic is reusable across components. Also thanks to Rum mixins, complex logic is understandable and does not get all thrown into a single 'componentDidMount' function. As to "Classes confuse both people and machines", I find it hard to relate to this problem, because I don't really see any classes. I work with components that have a render function and mixins, and if you don't use any mixins, a component looks just like a function. This tends to be a recurring theme: every once in a while I read an article about JavaScript and React, and I can't even relate to the problems, because they do not exist in my world. Another good example is hints on how to optimize apps to avoid excessive re-rendering, something I get for free with ClojureScript and immutable data structures (you can always quickly tell if two data structures are equal and avoid rendering).
  • onion2k 6y ago
    You've solved the problem that hooks solve by using Rum mixins instead, and you're confused why you don't need hooks?
    • iLemming 6y ago
      Have you actually used Clojurescript with React? Just any cljs library - Reagent, Rum, Re-frame, Fulcro? Maybe try it, perhaps then you'd understand why Clojure developers often get confused what problems every new hype cycle in JS/TS world is trying to solve. Because Clojure idioms often nicely turn them into something you don't have to worry about at all.
      • lilactown 6y ago
        I use ClojureScript professionally, and I believe Hooks are great. Reagent, Re-frame all have tradeoffs that they've made to try and shoe-horn in a solution that Hooks cleanly provides first-class support for. I see a lot of other Clojure users wade into discussions like these and reveal an unexamined view of the technology they use and the way that other communities are trying to solve these same problems. It's really discouraging to see people put Clojure(Script) and associated libs on a pedestal, because it removes any nuance from the discussion and makes people think that the Clojure community are a bunch of holier-than-thou zealots. FWIW, I was (am still) super excited about Hooks and have posted a lot of things critiquing ClojureScript React wrappers in the past, but I recognize now that they are making tradeoffs that ultimately are what the authors think are in the best interest of their user base. It would really be great if you (and everyone else) would enter these discussions with the same assumption.
• a-priori 6y ago
  I've been using hooks full-time for the last year or so in a _very large_ React code base (one of the largest in the world). None of these so-called problems are real in my experience. The first point is just whining about not wanting to learn new things -- we've on-boarded many new people onto our team in this time, and hook-based code is the easiest to understand. It's the old class-based components that are hard, and the most experienced team members work there usually to rewrite them as functional components. The second point is only sort of true. They can interact with class-based components in a parent-child relationship. That's enough to gradually migrate your application towards hooks: any time you want to make significant changes to a component, rewrite it. The third point is not a problem in my experience. Yes, we have rewritten some of our internal libraries as a direct result of hooks being available, not because the old ones didn't work but because we now had the tools to create a _much better API_ and took advantage of it. The fourth point makes no sense to me. If you need to use conditions like that do something different, e.g. put the different cases ("a" vs "b") in different child components and render the appropriate one. Any programming paradigm has rules around it, and this is no different. My response to the fifth point is "don't depend on control flow". You should be robust to evaluation order so it doesn't matter the exact order that React executes your code. If you have a execution order dependency in your code it will be highly brittle.
  • gregkerzhner 6y ago
    In my experience people abuse react components by making them too big with too much functionality. If you have a bunch of hooks tied together in a brittle way, thats not the hooks's fault. It's a good sign that you need to refactor your component into smaller sub components or move functionality out of components all together into redux or some other non UI related code. A big component with lots of logic will always be a liability whether it's hooks or classes because it will mix presentation with business logic and will rarely be well tested.
• mikewhy 6y ago
  Ah, I used to be on this side of the fence. Now I've learned to love hooks, and aced the test (except for the last, extra BS, question). Now the two issues I have with hooks still nag me in the back of my head, but are easy to get over: - `useCallback` still makes new function references that wouldn't happen in class-based components. as someone who starts out with `class MyComponent extends React.Purecomponent`, that bugged me. - easily access old props after updating. I built my components with something like `useEffect`, where mounting was considered "changing props from null to _something_", and updating was like normal: class MyComponent extends React.Component { componentDidMount = () => { this.handlePropsChange(null, null) } componentDidUpdate = (oldProps, oldState) => { this.handlePropsChange(oldProps, oldState) } handlePropsChange = (oldProps, oldState) => { if (didPropChange('userId', oldProps, this.props) { // now we know that props.userId changed, but also have access to `oldProps.userId` in case there's any cleanup that needs to happen. } } } I know this is possible with functional components / hooks, but it was nice to get this stuff "for free".
• luwes 6y ago
  Hooks are nothing new, it's just repackaging of https://github.com/dominictarr/observable https://github.com/dominictarr/observable https://github.com/adamhaile/S https://github.com/adamhaile/S Mobx and Vue use the same technique for running computeds. As does Solid and Sinuous, etc...
  • jiofih 6y ago
    Hooks are much more a reimplementation of the component lifecycle; receiving a change stream is only one of the use cases and has very little resemblance to observables, except that they trigger a re-render “automatically”.
• jtdev 6y ago
  The universe is stateful; no matter how hard FP zealots try to abstract that out of code, they will never change this fundamental fact.
  • nightski 6y ago
    FP does not do that. First of all, there is stateful code and then there is effectful code. It sounds like you are talking about the second, not the first. You can have tons of state and remain mathematically pure. Where people get hung up is effectful code, or mutable state. Even one of the more hardcore FP languages, Haskell, does not try to abstract that out. Instead it embraces it fully by giving constructs in the language to describe and control effects! This is far more powerful than straight up imperative languages. If anything, writing mutable, effectful code is more powerful in Haskell than in C/C++. Where Haskell gets difficult is when writing effectful code that interacts with external C libraries and the OS. But this has nothing to do with purity, state, or effects. It really only has to do with the fact that it is designed to have lazy evaluation by default. Which itself has a lot of advantages, but it makes this interaction more difficult as code does not execute in the same order as you write it. You may find that languages such as OCaml, which are fully functional and have strict evaluation are a joy to work with.
  • tome 6y ago
    The universe is also highly concurrent and probabilistic, but that doesn't mean we need to design our programming languages that way.
  • TheCoelacanth 6y ago
    Nonsense. These are all just techniques for modeling reality, not reality itself. You could model the universe just as accurately as a stateless function of time as you could as a stateful entity that moves through time.
    • jtdev 6y ago
      The further you get from the true representation of the thing you’re trying to model, the more difficult reasoning about it becomes. I’m all for abstractions that result in a net positive... I simply believe that FP is less about improving computing and more about ego.
• RedBeetDeadpool 6y ago
  Is `more stuff to learn` seriously a critique? I mean if you want to stop learning stuff then maybe, go live in your own little bubble. The other criticisms seem a little bit like someone who doesn't understand how hooks works criticizing how hooks work because he doesn't understand how hooks work. Perhaps, he doesn't understand how hooks work because he doesn't want to learn more stuff?
• lpage 6y ago
  > The problem with learning about hooks is that they're not generally applicable knowledge about computing or programming. That's true of the hooks API specifically, but not true of the underlying abstraction. Hooks are (informally) algebraic effects - one of the coolest and most general abstractions for inspecting and manipulating a program's control flow [1, 2]. Algebraic effects are still somewhat niche and most programmers haven't encountered them in name or in practice, so in that regard, hooks are actually one of the fun cases when learning a new API is mind expanding. [1] https://github.com/ocamllabs/ocaml-effects-tutorial#1-algebraic-effects-and-handlers https://github.com/ocamllabs/ocaml-effects-tutorial#1-algebr... [2] https://overreacted.io/algebraic-effects-for-the-rest-of-us/ https://overreacted.io/algebraic-effects-for-the-rest-of-us/
• pattrn 6y ago
  It's a unfortunate that he doesn't include the equivalent class-based implementations of his logging quiz. Event lifecycles notoriously obscure order of execution, so I'm not sure the alternative is any clearer -- especially not with contrived examples. In my experience with both hooks and classes: - Hooks require substantially less boilerplate than classes. - Rendering optimization problems with hooks tend to take more time to identify and to fix. There are other pros/cons, but these are the ones that affect my work most frequently.
• mrozbarry 6y ago
  One thing that baffles me is that no one has brought up that hooks don't have an obvious context. For instance, if I have a single app and component, and use a hook, I understand that the hook and app have some sort of implicit connection. But what happens when I have two distinct react apps on a page - does that break the ordering that hooks require? How does a hook have any affinity to the app, or does that even matter? I'm sure looking at the code will cause a "oh, I get it" moment, but that doesn't mean it's obvious to anyone just picking up hooks. Honestly, I think hooks are fine, but I'd almost prefer a signature like `const MyComponent = (props, { ...hooksHere })` so there's at least a false affinity between the application and the component.
  • gotofritz 6y ago
    > hooks don't have an obvious context. I mean, that's the whole point of hooks... they get the context of whatever host function scope they are in. That's why the 'reusable logic' spiel. So if you create a useLocalStorage hook, for example, you can then plug it into any function component and it will use. It's as if each function was an invisible class, with an invisible this.state
  • acemarke 6y ago
    The ordering question is literally just about how you call them within a single specific component. That component can then be used as many times as you want, in as many apps as you want. In other words, this is not legal: const [stateA, setStateA] = useState(false); if(stateA) { const [stateB, setStateB] = useState(42); } Call as many hooks as you want, in whatever sequence you want. Just make sure all the calls are at the top level of that function component, and that you don't somehow change the sequence of those from one render pass to the next. As for how they work, React already has metadata that describes each component in the tree. There's a specific field in those metadata objects that gets used for tracking internal component state, and for function components, that field stores an array / linked list of the hook calls you've made and their last saved results. See these resources for more explanations on how hooks are implemented: https://github.com/markerikson/react-redux-links/blob/master/react-hooks.md#understanding-hooks-concepts https://github.com/markerikson/react-redux-links/blob/master...
• deleted 6y ago
  [deleted]
• ericmcer 6y ago
  Feels like the author is someone who really sunk into the composed higher order component style of writing React. As someone who has coworkers who loved spreading logic into 'composable HoC' that only end up being reused 1-2x, I welcome hooks. A single component wrapped by 3-4 HoC that each do trivial tasks always felt like mental strain rather than a helpful abstraction. My favorite was HoC's that added class component functionality to function components... just use a class.
• andrewrothman 6y ago
  Good critique. I agree about control flow and memoization. I tend to run into issues every now and then with memoization and hook "dependencies", but I'm getting better at it. I think 1, 2 and 3 aren't really great arguments. There's always more to learn, and it seems that class components are on the way out, and are around mostly due to backwards compatibility. But it is true that a lot of legacy code uses them. I wish they'd have started with functional components, but I can't blame the team for not figuring out all of the details in advance. I'm curious what others think. Thanks!
• chadlavi 6y ago
  > so much to learn it's almost like software development is a highly skilled technical profession that takes years to master?
• stevebmark 6y ago
  Hooks have unlocked so much power in React but still deserve critiquing. However I think the author only hinted at the major complaint I have about hooks, which is that it's no longer Javascript. It's not a function, it's sort of like type system magic. Hooks can't be nested, order matters, can't be conditionally called, and you have to understand trickier memoization to avoid bugs. It also isn't portable knowledge to other systems, like vanilla Javascript is. React is great because it's vanilla Javascript, expressions all the way down, and lifecycle methods, which everyone is used to. Hooks are a new non-vanilla-javascript paradigm with special and sometimes tricky rules. Other than, there's no reason to write React unless you're using hooks, and I wonder what the next major paradigm shift will be. I look back on all our HOCs and function as children and shudder compared to how easy it is with hooks.
  • untog 6y ago
    > React is great because it's vanilla Javascript What about JSX? It’s very useful but it’s also an absolutely huge departure from vanilla JavaScript and hides a fair amount of complexity behind what your code is actually doing.
    • stevebmark 6y ago
      My mental model of JSX is that it's vanilla Javascript, and it's helped me appreciate trying to write more expressions and less statements. Like JSX isn't getting transformed into some weird different control flow, it's just a nicer way to write the same expression. And DSLs are a good general computer science principle. Hooks don't seem quite as general of a concept to me as a really well thought out DSL that has a minimal surface area but still turns out to be super useful.
      • wwright 6y ago
        Hooks are very similar to applicatives as you’d see them in Haskell, for what it’s worth (it’s where a lot of the rules of hooks come from). They also have some similarity to algebraic effects (as do sagas).
    • 6y ago
• contigo 6y ago
  IMAO hooks are just a dirty hack, but sold very well. Internally in React the state of a hook is being kept and updated when you call the set function, kinda similar to vtables and context in OOP. There is no other way to do this AFAIK. It only mimics functional programming, and that's why you see the restrictions about hooks, you cannot use them outside React, cannot nest, etc..
• Eric_WVGG 6y ago
  > The problem with learning about hooks is that they're not generally applicable knowledge about computing or programming. They're a React-specific thing. In 5-10 years when you're programming something completely different your knowledge of hooks will be completely obsolete. don’t tell him about SwiftUI
• desc 6y ago
  I'm going to express something a lot of people are thinking and are being far too diplomatic about. React Hooks are a fucking stupid idea and always were. They're basically just adding dynamic scoping to a language and framework which doesn't need it, in one of the most 'magical' and confusing ways possible. You have to care about execution order to understand exactly how they'll all work and that will bite you eventually if you're building anything without knowledge of all the contexts in which it's called. There's a reason that most languages stick to lexical scoping: you can see the dependencies, in the same file. And a large portion of the value of functional languages is that they avoid state, making magic-at-a-distance impossible. Boilerplate is not the problem. Magic is the problem.
  • jonny_eh 6y ago
    I never understood what was wrong with class components anyways. What did Hooks bring that couldn't be done in an easier to understand way with class components?
    • aidos 6y ago
      Hooks allow for declarative behaviour that’s harder to model other ways. With hooks, something like declaring when an event listener should be in play becomes much cleaner. The alternatives with class components are messy. The above criticism that you don’t get to have pure functional components anymore doesn’t really make sense to me - either you have some lingering state to deal with, or you write a pure function. Your hand is forced by the problem. You could switch over to class components but they’re really not much clearer to read. Most of the bugs I’ve seen have been around JavaScript’s crummy equality checks and the need for more memoisation.
    • duxup 6y ago
      I found class components really....wordy binding this to this all the time and lifecycle methods could become kinda wild after a while doing all these checks for a bunch of things...and imo that just trended towards these bulky spaghetti class components / lifecycle methods.
    • kin 6y ago
• turnipla 6y ago
  I never got into React, but seeing it compared to Svelte I find it hilariously convoluted. Hooks make it even worse.
• waddlesworth 6y ago
  I've read about Hooks for awhile, but they still confuse me. Maybe it's largely because I haven't experienced any of the pain points that are described as the motivation for their development, but I've used a number of state-management libraries that handle state. Just as one example, in a lot of posts and commentary I've seen, is that hooks are replacements for both HoCs and render props. Admittedly, I haven't yet tried to do any actual development with hooks, but I can't even figure out how to solve the problem in the example in docs for HoCs[0]. Do you pass in a hook as a prop? That doesn't seem wise. A custom hook for each data source still has the same code duplication. The docs talk a lot about how to build individual components using hooks, but very little about tying them together. [0]: https://reactjs.org/docs/higher-order-components.html https://reactjs.org/docs/higher-order-components.html
  • acemarke 6y ago
    Hooks solve a couple different problems: - Giving function components the ability to have internal state and trigger side effects, giving them the same capabilities as class components have had - Reusing logic across components I talked about the progress from mixins to HOCs to render props to hooks in a talk at ReactBoston last year [0], which had an example of tracking mouse coordinates using all four approaches. In that sense, yes, they do replace the other techniques as a way to reuse logic. You call them inside of your function components, like this: function MyComponent() { const [counter, setCounter] = useState(0); const {x, y} = useMousePosition(); // rest of the rendering logic here } [0] https://blog.isquaredsoftware.com/2019/09/presentation-hooks-hocs-tradeoffs/ https://blog.isquaredsoftware.com/2019/09/presentation-hooks...
• afranchuk 6y ago
  I've been out of the React game for a while, and this is the first I've read about Hooks (or at least the first time I read enough to look into them). If I understand things correctly, they are automatic dependency tracking functions that will rerun as needed? Kinda like S.js [1]? Though that's different in that it's built around only that functionality, not integrated into a larger system. [1]: https://github.com/adamhaile/S https://github.com/adamhaile/S
  • acemarke 6y ago
    Not exactly. I'd strongly recommend reading through the React hooks docs, as well as the other hooks resources I have linked here: https://github.com/markerikson/react-redux-links/blob/master/react-hooks.md https://github.com/markerikson/react-redux-links/blob/master...
• kschiffer 6y ago
  Interesting to finally see some criticism about hooks. The biggest problem I have with Hooks is readability. IMO, functional components with hooks are harder to reason about since they obfuscate logic in a weird react-specific contract. Class components have a much simpler, contract and syntax. They also felt much more natural since they picked up on familiar concepts of JavaScript, albeit with a couple of drawbacks. I get the advantages of hooks, but in a way, at least to me it seems like they, at substantial cost, solve a problem which I barely ever encountered, even after building react apps for many years.
• azirbel 6y ago
  I really like hooks. I previously spent a lot of time in HOCs, and I find hooks much simpler. But I also have problems with #5 (control flow): The main issue I have with hooks is that I can't easily trace why updates are being triggered in my app; this makes it hard to debug performance issues. For example, my app once got really slow, and the profiler told me that a root(ish)-level component was causing a lot of re-renders. Unfortunately, that component used multiple hooks, and the only way I was able to isolate the problem was by binary-searching, deleting hooks until the re-renders stopped. Anyone have better ways of dealing with this?
  • kin 6y ago
    Not sure if this helps or is relevant, but I like to think of a component as a physics function. For example, at t = 0, the output is one thing. When t = 1, the output is another. The same way of thinking can be applied to hooks. Some hooks only execute at t = 0, and at that time, variables x, y, and z also have specific values. Hopefully you can think this way and your values won't intertwine so much that it becomes hard to trace.
• darepublic 6y ago
  People talk about the 'good old days' of jquery. I do think it was easier to be a web developer in those days because there weren't as many levels of abstraction. It was just your simple text editor, html and js script, that's it. And you were directly changing the DOM. But writing jQuery for complicated apps can get out of control very fast. I do not miss querying classes on an element to figure out what to do next. Nowadays I meet 'React Developers' who didn't know that you can do document.querySelector(...). They tell me without batting an eye that React makes websites faster.. and that it is faster than plain javascript. And before anyone tells me that it can make things faster through DOM diffing or what have you -- you are wrong. Situationally React could be faster than poorly written js, but in most cases it won't be and that is not its point. It doesn't magically imbue your web application with hyper speed. Quite the opposite! Its like all these layers of node, npm, React, Hooks crud built up and there are actually people junior enough that their only exposure to webdev is through this morass -- and that is sad. Not because these tools/frameworks are bad, but because web dev can be so simple and easy and they are robbed of having that in their back pocket, as a proper foundation.
• luord 6y ago
  The first three points are something that crops up in any moderately used library/framework, one way or another. Seemed a little bit like nitpicking. The last two, now, do look like they can turn into serious problems (and a lot of confusing code) if one isn't careful. Then again, I write this as someone who mostly uses, and vastly prefers, Vue so it's not like I'm an authority on react.
• mikestop 6y ago
  I've found hooks incredibly easy to reason about, and I'll happy take the bit of magic that goes along with it. (Anyway, I don't see any of you criticizing JSX for being magic.) On the other hand, I really like functional programming, so I've seen the entire development path of react as positive.