TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

A Critique of React Hooks

247 pointsby vicarrionabout 5 years ago

49 comments

descabout 5 years ago
I&#x27;m going to express something a lot of people are thinking and are being far too diplomatic about.<p>React Hooks are a <i>fucking stupid idea</i> and always were.<p>They&#x27;re basically just adding dynamic scoping to a language and framework which doesn&#x27;t need it, in one of the most &#x27;magical&#x27; and confusing ways possible. You have to care about execution order to understand exactly how they&#x27;ll all work and that <i>will</i> bite you eventually if you&#x27;re building anything without knowledge of all the contexts in which it&#x27;s called.<p>There&#x27;s a reason that most languages stick to lexical scoping: you can <i>see</i> the dependencies, in the same file.<p>And a large portion of the value of functional languages is that they avoid state, making magic-at-a-distance impossible.<p>Boilerplate is not the problem. Magic is the problem.
评论 #23002670 未加载
评论 #23002720 未加载
评论 #23002155 未加载
评论 #23011983 未加载
评论 #23001028 未加载
评论 #23001331 未加载
评论 #23002326 未加载
评论 #23002248 未加载
评论 #23001072 未加载
dcreabout 5 years ago
An important point I don&#x27;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.<p>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.<p>Dan Abramov calls hooks a &quot;missing primitive&quot;:<p>&quot;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.<p>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.<p>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”.<p>They <i>could</i> be syntax. They <i>would</i> be in Eff or Koka. But the benefits are not worth the friction it creates in JS.&quot;<p><a href="https:&#x2F;&#x2F;twitter.com&#x2F;dan_abramov&#x2F;status&#x2F;1093696560280596491" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;dan_abramov&#x2F;status&#x2F;1093696560280596491</a><p><a href="https:&#x2F;&#x2F;twitter.com&#x2F;dan_abramov&#x2F;status&#x2F;1093697963350810624" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;dan_abramov&#x2F;status&#x2F;1093697963350810624</a><p><a href="https:&#x2F;&#x2F;twitter.com&#x2F;dan_abramov&#x2F;status&#x2F;1093698629708251136" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;dan_abramov&#x2F;status&#x2F;1093698629708251136</a>
评论 #22997180 未加载
评论 #22997106 未加载
评论 #23005817 未加载
评论 #22997330 未加载
lucideerabout 5 years ago
The reaction to react hooks has been (as far as I&#x27;ve seen) a little too positive, so I was looking forward to read a genuine critique.<p>However, I&#x27;m disappointed.<p>In reverse order:<p>&gt; <i>5. They Complicate Control Flow</i><p>A set of contrived examples, within which the only genuinely confusing part is not related to React at all. It&#x27;s Javascript&#x27;s object non-equality ({ multiplier: 5 } !== { multiplier: 5 })<p>&gt; <i>4. The Rules of Hooks Limit Your Design</i><p>This is an interesting section but seems to point to a pattern that would lead to serious issues given any library&#x2F;paradigm. It&#x27;s criticising the Rules for their inflexibility, but in this instance they&#x27;re <i>helping</i> you by pointing out the pitfalls of your approach, and encouraging you to rethink it.<p>An alternative way of looking at it is that it&#x27;s again (like in 5) bemoaning Javascript&#x27;s object inequality which is prevening the memoization here.<p>The other 3 bullets are pretty silly &quot;boo new things&quot; issues that are common to migration to any new API.
评论 #22996906 未加载
评论 #22996616 未加载
评论 #23005200 未加载
stevebmarkabout 5 years 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&#x27;s no longer Javascript. It&#x27;s not a function, it&#x27;s sort of like type system magic. Hooks can&#x27;t be nested, order matters, can&#x27;t be conditionally called, and you have to understand trickier memoization to avoid bugs. It also isn&#x27;t portable knowledge to other systems, like vanilla Javascript is. React is great because it&#x27;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&#x27;s no reason to write React unless you&#x27;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.
评论 #23000590 未加载
评论 #23003339 未加载
评论 #23000482 未加载
评论 #23001885 未加载
评论 #23003839 未加载
评论 #23000677 未加载
Saasterabout 5 years 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&#x27;s much more magic. And clarity of rendering is literally the one thing I want from React.<p>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&#x27;s constant gotchas; can&#x27;t do that here, didn&#x27;t memoize this, can&#x27;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.
评论 #23002419 未加载
评论 #23000006 未加载
评论 #23001930 未加载
评论 #22998729 未加载
评论 #23002554 未加载
tenaciousDanielabout 5 years ago
IMO, we&#x27;ve traded the complexity of `this` with the complexity of hooks. Maybe I&#x27;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&#x27;s a complexity that is internal to the language itself. Hooks just feel so <i>weird</i> and alien to JS. I find them very, very difficult to reason about.<p>- difficult to reason about <i>except for a few simple use cases</i>. The developer experience is nice if what you&#x27;re doing is basic. But if, for example, you&#x27;re aiming for 100% code coverage, unit testing hooks is an absolute nightmare.
评论 #22996525 未加载
评论 #22996926 未加载
评论 #22996579 未加载
评论 #23001912 未加载
评论 #22996984 未加载
deckard1about 5 years ago
Hooks elucidate everything I&#x27;ve felt wrong about React, but have not been able to put my finger on it until recently.<p>Hooks reveal two major things with React:<p>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&#x27;t need to throw out classes or objects to get reuse.<p>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 <i>incredibly</i> important for understanding code flow. You have to be constantly aware of when it&#x27;s safe to use certain variables and the implications of using variables in certain scopes now. In 2020!! This is INSANE.
评论 #22997172 未加载
评论 #22997712 未加载
评论 #22997230 未加载
评论 #22997325 未加载
评论 #22997235 未加载
评论 #22997394 未加载
评论 #22997700 未加载
评论 #23012353 未加载
评论 #22997767 未加载
a-prioriabout 5 years ago
I&#x27;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.<p>The first point is just whining about not wanting to learn new things -- we&#x27;ve on-boarded many new people onto our team in this time, and hook-based code is the easiest to understand. It&#x27;s the old class-based components that are hard, and the most experienced team members work there usually to rewrite them as functional components.<p>The second point is only sort of true. They can interact with class-based components in a parent-child relationship. That&#x27;s enough to gradually migrate your application towards hooks: any time you want to make significant changes to a component, rewrite it.<p>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&#x27;t work but because we now had the tools to create a _much better API_ and took advantage of it.<p>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 (&quot;a&quot; vs &quot;b&quot;) in different child components and render the appropriate one. Any programming paradigm has rules around it, and this is no different.<p>My response to the fifth point is &quot;don&#x27;t depend on control flow&quot;. You should be robust to evaluation order so it doesn&#x27;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.
评论 #22997507 未加载
sibeliussabout 5 years ago
It&#x27;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&#x27;t totally freeze but I don&#x27;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 <a href="https:&#x2F;&#x2F;overreacted.io&#x2F;a-complete-guide-to-useeffect&#x2F;" rel="nofollow">https:&#x2F;&#x2F;overreacted.io&#x2F;a-complete-guide-to-useeffect&#x2F;</a> for something that was never really a problem before. The list goes on and on.
评论 #22997482 未加载
评论 #22997247 未加载
评论 #22997364 未加载
jwrabout 5 years ago
ClojureScript user here, with a big SaaS app using React, developed over the last 4 years or so, using the excellent Rum library, <a href="https:&#x2F;&#x2F;github.com&#x2F;tonsky&#x2F;rum" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;tonsky&#x2F;rum</a>.<p>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&#x27;t even fully know what they do. I&#x27;ve read the &quot;Motivation&quot; 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 &#x27;componentDidMount&#x27; function. As to &quot;Classes confuse both people and machines&quot;, I find it hard to relate to this problem, because I don&#x27;t really see any classes. I work with components that have a render function and mixins, and if you don&#x27;t use any mixins, a component looks just like a function.<p>This tends to be a recurring theme: every once in a while I read an article about JavaScript and React, and I can&#x27;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).
评论 #22997404 未加载
评论 #22998214 未加载
darepublicabout 5 years ago
People talk about the &#x27;good old days&#x27; of jquery. I do think it was easier to be a web developer in those days because there weren&#x27;t as many levels of abstraction. It was just your simple text editor, html and js script, that&#x27;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 &#x27;React Developers&#x27; who didn&#x27;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&#x27;t be and that is not its point. It doesn&#x27;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&#x2F;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.
twicabout 5 years ago
I learned about Crank today:<p><a href="https:&#x2F;&#x2F;crank.js.org&#x2F;blog&#x2F;introducing-crank" rel="nofollow">https:&#x2F;&#x2F;crank.js.org&#x2F;blog&#x2F;introducing-crank</a><p>Crank itself is interesting, but what&#x27;s relevant here is the broader critique of React there.
评论 #22998309 未加载
mstudioabout 5 years ago
I have some similar gripes. I find Hooks to save a bit of coding overall. I&#x27;ve found my functional components to be about 10-20% smaller than my class components. I&#x27;m not 100% convinced it&#x27;s really worth it, though.<p>With class components, my state&#x2F;props are clearly defined within the constructor and&#x2F;or PropTypes. This makes it easy to understand the overall architecture of a component. Functional components with Hooks don&#x27;t have the same sort of structure and can be difficult to understand at a glance.<p>One of my gripes with Hooks is that listening for async state updates requires more code&#x2F;complexity than w&#x2F;classes. In a traditional class component, you can add a second, optional argument as a callback which is called when the state has updated:<p><pre><code> setState({ myState: &#x27;newValue&#x27; }, () =&gt; { this.doSomething(); }); </code></pre> With Hooks, that doesn&#x27;t apply. The useState &quot;set&quot; function doesn&#x27;t have a similar argument.<p><pre><code> setMyState(&#x27;newState&#x27;); </code></pre> Instead, you need to use &#x27;useEffect&#x27; with an optional argument:<p><pre><code> useEffect(() =&gt; { doSomething(); }, [myState]); </code></pre> This leads to potentially having many &quot;useEffects&quot; scattered throughout the component.<p>That said, this is just my experience with Hooks after a few months of working with them. It&#x27;s entirely possible that I just haven&#x27;t had enough experience with them yet.
评论 #22996865 未加载
评论 #23001803 未加载
评论 #23002249 未加载
评论 #22996996 未加载
jasonkillianabout 5 years 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).<p>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.<p>Dan Abramov has written a lot about the philosophy of hooks[0] at his site overreacted[1], I&#x27;d love to see a &#x27;retrospective&#x27; 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!<p>[0]: <a href="https:&#x2F;&#x2F;overreacted.io&#x2F;why-isnt-x-a-hook&#x2F;" rel="nofollow">https:&#x2F;&#x2F;overreacted.io&#x2F;why-isnt-x-a-hook&#x2F;</a>, <a href="https:&#x2F;&#x2F;overreacted.io&#x2F;algebraic-effects-for-the-rest-of-us&#x2F;" rel="nofollow">https:&#x2F;&#x2F;overreacted.io&#x2F;algebraic-effects-for-the-rest-of-us&#x2F;</a>, <a href="https:&#x2F;&#x2F;overreacted.io&#x2F;a-complete-guide-to-useeffect&#x2F;" rel="nofollow">https:&#x2F;&#x2F;overreacted.io&#x2F;a-complete-guide-to-useeffect&#x2F;</a><p>[1]: <a href="https:&#x2F;&#x2F;overreacted.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;overreacted.io&#x2F;</a>
pattrnabout 5 years ago
It&#x27;s a unfortunate that he doesn&#x27;t include the equivalent class-based implementations of his logging quiz. Event lifecycles notoriously obscure order of execution, so I&#x27;m not sure the alternative is any clearer -- especially not with contrived examples. In my experience with both hooks and classes:<p>- Hooks require substantially less boilerplate than classes.<p>- Rendering optimization problems with hooks tend to take more time to identify and to fix.<p>There are other pros&#x2F;cons, but these are the ones that affect my work most frequently.
azhuabout 5 years 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.<p>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 &quot;roll your own&quot; 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.<p>That&#x27;s the thing -- it&#x27;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.
评论 #22997457 未加载
评论 #22998903 未加载
joonhochoabout 5 years 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.
lpa22about 5 years 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&#x2F;componentsWillUnmount for registering and disposing of component dependencies is very easy to reason about and scale.
评论 #22996575 未加载
评论 #22996526 未加载
sebringjabout 5 years 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 &quot;lies&quot; 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&#x27;m sure I&#x27;ll find out more that I assumed incorrectly as I go. Auto-magic sometimes is confusing to me.
评论 #22998540 未加载
tttyabout 5 years ago
Hooks are magic with new rules that are different from regular JavaScript. They don&#x27;t follow the regular flow you&#x27;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.<p>Hooks it&#x27;s like learning a new language pretty much, which is only useful for react. I&#x27;m using them because of lack of better things.
评论 #22997133 未加载
city41about 5 years 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&#x27;ve been involved in two code bases now where hooks are just everywhere and they were both an absolute nightmare. But I&#x27;ve also been involved in code bases where hooks are used more sparingly, about on par with when HoCs were used, and it&#x27;s rather pleasant. In general, the more &quot;dumb&quot; components your app has, the more manageable it seems to be overall.
Saasterabout 5 years ago
My biggest worry with React is that it has restless developers with idle hands.<p>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?
评论 #22997896 未加载
zodiacabout 5 years ago
I personally don&#x27;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&#x2F;effects&#x2F;context in a language with algebraic effects.<p><a href="https:&#x2F;&#x2F;overreacted.io&#x2F;algebraic-effects-for-the-rest-of-us&#x2F;" rel="nofollow">https:&#x2F;&#x2F;overreacted.io&#x2F;algebraic-effects-for-the-rest-of-us&#x2F;</a>
评论 #22997470 未加载
mikewhyabout 5 years ago
Ah, I used to be on this side of the fence. Now I&#x27;ve learned to love hooks, and aced the test (except for the last, extra BS, question).<p>Now the two issues I have with hooks still nag me in the back of my head, but are easy to get over:<p>- `useCallback` still makes new function references that wouldn&#x27;t happen in class-based components. as someone who starts out with `class MyComponent extends React.Purecomponent`, that bugged me.<p>- easily access old props after updating. I built my components with something like `useEffect`, where mounting was considered &quot;changing props from null to _something_&quot;, and updating was like normal:<p><pre><code> class MyComponent extends React.Component { componentDidMount = () =&gt; { this.handlePropsChange(null, null) } componentDidUpdate = (oldProps, oldState) =&gt; { this.handlePropsChange(oldProps, oldState) } handlePropsChange = (oldProps, oldState) =&gt; { if (didPropChange(&#x27;userId&#x27;, oldProps, this.props) { &#x2F;&#x2F; now we know that props.userId changed, but also have access to `oldProps.userId` in case there&#x27;s any cleanup that needs to happen. } } } </code></pre> I know this is possible with functional components &#x2F; hooks, but it was nice to get this stuff &quot;for free&quot;.
ramozabout 5 years ago
React is great at rendering data. It should&#x27;ve stopped there.
评论 #22997299 未加载
评论 #22998498 未加载
contigoabout 5 years 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&#x27;s why you see the restrictions about hooks, you cannot use them outside React, cannot nest, etc..
lpageabout 5 years ago
&gt; The problem with learning about hooks is that they&#x27;re not generally applicable knowledge about computing or programming.<p>That&#x27;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&#x27;s control flow [1, 2]. Algebraic effects are still somewhat niche and most programmers haven&#x27;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.<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;ocamllabs&#x2F;ocaml-effects-tutorial#1-algebraic-effects-and-handlers" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;ocamllabs&#x2F;ocaml-effects-tutorial#1-algebr...</a><p>[2] <a href="https:&#x2F;&#x2F;overreacted.io&#x2F;algebraic-effects-for-the-rest-of-us&#x2F;" rel="nofollow">https:&#x2F;&#x2F;overreacted.io&#x2F;algebraic-effects-for-the-rest-of-us&#x2F;</a>
psmyrdekabout 5 years ago
There&#x27;s yet another valuable hooks critique that I recommend you to read - <a href="https:&#x2F;&#x2F;typeofweb.com&#x2F;wady-react-hooks&#x2F;" rel="nofollow">https:&#x2F;&#x2F;typeofweb.com&#x2F;wady-react-hooks&#x2F;</a> (Use Google Translate to convert Polish to English)
评论 #22999814 未加载
andrewingramabout 5 years 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&#x27;t a problem new to hooks.<p>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&#x27;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&#x27;t really do it the other way around, i.e. turn a HOC into a hook.
andrewrothmanabout 5 years ago
Good critique. I agree about control flow and memoization. I tend to run into issues every now and then with memoization and hook &quot;dependencies&quot;, but I&#x27;m getting better at it.<p>I think 1, 2 and 3 aren&#x27;t really great arguments. There&#x27;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&#x27;d have started with functional components, but I can&#x27;t blame the team for not figuring out all of the details in advance.<p>I&#x27;m curious what others think. Thanks!
ericmcerabout 5 years 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 &#x27;composable HoC&#x27; that only end up being reused 1-2x, I welcome hooks.<p>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&#x27;s that added class component functionality to function components... just use a class.
luwesabout 5 years ago
Hooks are nothing new, it&#x27;s just repackaging of<p><a href="https:&#x2F;&#x2F;github.com&#x2F;dominictarr&#x2F;observable" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;dominictarr&#x2F;observable</a> <a href="https:&#x2F;&#x2F;github.com&#x2F;adamhaile&#x2F;S" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;adamhaile&#x2F;S</a><p>Mobx and Vue use the same technique for running computeds.<p>As does Solid and Sinuous, etc...
评论 #22997632 未加载
runawaybottleabout 5 years 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.<p>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.
评论 #22996604 未加载
rgloverabout 5 years ago
From what I&#x27;ve learned using them, hooks are a tool like anything else—pushing one method as &quot;the&quot; way means that you make a lot of poor engineering decisions.<p>Hooks are like a screwdriver; great for simple stuff when you want to reduce code overhead.<p>Sometimes you need a power drill, though, and classes and the old-school lifecycle functions are wonderful for that.
waddlesworthabout 5 years ago
I&#x27;ve read about Hooks for awhile, but they still confuse me. Maybe it&#x27;s largely because I haven&#x27;t experienced any of the pain points that are described as the motivation for their development, but I&#x27;ve used a number of state-management libraries that handle state.<p>Just as one example, in a lot of posts and commentary I&#x27;ve seen, is that hooks are replacements for both HoCs and render props.<p>Admittedly, I haven&#x27;t yet tried to do any actual development with hooks, but I can&#x27;t even figure out how to solve the problem in the example in docs for HoCs[0].<p>Do you pass in a hook as a prop? That doesn&#x27;t seem wise. A custom hook for each data source still has the same code duplication.<p>The docs talk a lot about how to build individual components using hooks, but very little about tying them together.<p>[0]: <a href="https:&#x2F;&#x2F;reactjs.org&#x2F;docs&#x2F;higher-order-components.html" rel="nofollow">https:&#x2F;&#x2F;reactjs.org&#x2F;docs&#x2F;higher-order-components.html</a>
评论 #23002471 未加载
chadlaviabout 5 years ago
&gt; so much to learn<p>it&#x27;s almost like software development is a highly skilled technical profession that takes years to master?
bobblywobblesabout 5 years 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.
Eric_WVGGabout 5 years ago
&gt; The problem with learning about hooks is that they&#x27;re not generally applicable knowledge about computing or programming. They&#x27;re a React-specific thing. In 5-10 years when you&#x27;re programming something completely different your knowledge of hooks will be completely obsolete.<p>don’t tell him about SwiftUI
azirbelabout 5 years 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):<p>The main issue I have with hooks is that I can&#x27;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.<p>Anyone have better ways of dealing with this?
评论 #23003243 未加载
kschifferabout 5 years ago
Interesting to finally see some criticism about hooks.<p>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.
afranchukabout 5 years ago
I&#x27;ve been out of the React game for a while, and this is the first I&#x27;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&#x27;s different in that it&#x27;s built around <i>only</i> that functionality, not integrated into a larger system.<p>[1]: <a href="https:&#x2F;&#x2F;github.com&#x2F;adamhaile&#x2F;S" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;adamhaile&#x2F;S</a>
评论 #23003146 未加载
RedBeetDeadpoolabout 5 years 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.<p>The other criticisms seem a little bit like someone who doesn&#x27;t understand how hooks works criticizing how hooks work because he doesn&#x27;t understand how hooks work. Perhaps, he doesn&#x27;t understand how hooks work because he doesn&#x27;t want to learn more stuff?
abuldauskasabout 5 years ago
My only issue with Hooks has been that they are not inputs into the component. It&#x27;s a step in the right direction of making React more functional I would just preferred less magic, personally.<p><pre><code> function Component(props, { useState, useContext }) { ... } </code></pre> Of course that would break backwards compatibility with the old 2nd argument being context, so I get why they did it.
评论 #22997046 未加载
luordabout 5 years ago
The first three points are something that crops up in any moderately used library&#x2F;framework, one way or another. Seemed a little bit like nitpicking.<p>The last two, now, do look like they can turn into serious problems (and a lot of confusing code) if one isn&#x27;t careful.<p>Then again, I write this as someone who mostly uses, and vastly prefers, Vue so it&#x27;s not like I&#x27;m an authority on react.
mikestopabout 5 years ago
I&#x27;ve found hooks incredibly easy to reason about, and I&#x27;ll happy take the bit of magic that goes along with it. (Anyway, I don&#x27;t see any of you criticizing JSX for being magic.) On the other hand, I really like functional programming, so I&#x27;ve seen the entire development path of react as positive.
mrozbarryabout 5 years ago
One thing that baffles me is that no one has brought up that hooks don&#x27;t have an obvious context.<p>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.<p>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?<p>I&#x27;m sure looking at the code will cause a &quot;oh, I get it&quot; moment, but that doesn&#x27;t mean it&#x27;s obvious to anyone just picking up hooks.<p>Honestly, I think hooks are fine, but I&#x27;d almost prefer a signature like `const MyComponent = (props, { ...hooksHere })` so there&#x27;s at least a false affinity between the application and the component.
评论 #23001252 未加载
评论 #22999692 未加载
turniplaabout 5 years ago
I never got into React, but seeing it compared to Svelte I find it hilariously convoluted. Hooks make it even worse.
draw_downabout 5 years ago
I don&#x27;t think this is a great critique, simply because the pain I&#x27;ve encountered using them isn&#x27;t mentioned here. The incompatibility with class components is what it is, they&#x27;re different programming paradigms that you have to choose between. If your library leaned heavily into HOCs, that was an unfortunate choice and I&#x27;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.<p>I guess I see a lot of this as evolutionary. It&#x27;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.<p>In my day job I work on a pretty old (in React years) project, and we haven&#x27;t had trouble writing new code in a functional + hooks style. Still plenty of class components abound.
jtdevabout 5 years 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.
评论 #22997564 未加载
评论 #22998133 未加载
评论 #22998029 未加载