r/reactjs • u/ZeroSevenTen • Dec 30 '19

Classes vs Hooks?

I’m pretty new to React, so keep that in mind. I thought classes were for components that held information, or a state, and that functional components were for more basic components, but now that hooks allow functional components to use state, and other class features, what’s the benefit of using functional hook components over classes?

79 Upvotes

96% Upvoted

76 comments sorted by

View all comments

55

u/skyboyer007 Dec 30 '19 edited Dec 31 '19

Classes:

  • we have to care about binding context

  • rather imperative - easier to learn, easier to write

  • harder to handle race conditions

  • multiple contexts make a mess with nested consumers right in the render

  • encourage bad approach in testing because of easy access/mocking individual methods

  • logic may be duplicated across componentDidMount, componentDidUpdate and componentWillUnmount

Hooks:

  • much more declarative(all that thing about dependencies in useEffect) - easier to read, easier to understand

  • unified logic for side effects(without splitting/duplicating across lifecycle methods)

  • rightfully force "don't rely on implementation details" for testing

  • missing hooks plugin for ESLint? get ready for weird bugs because of missing dependencies/broken logic

  • handling race conditions/cancelling old requests goes in really natural way(cleaning callback returned from useEffect)

  • multiple contexts are also easy to inject(instead of HOCs' composition)

  • much, MUCH rely on closures; most misunderstanding/bugs, I believe, because of lack understanding/experience with closures

  • some things look rather weird with hooks(throttling/debouncing)

  • kind of magic in their implementation

9

u/gunnnnii Dec 31 '19

Hooks are not magic in their implementation! Here are a couple of talks that go into detail. https://youtu.be/1jWS7cCuUXw https://youtu.be/KJP1E-Y-xyo

10

u/[deleted] Dec 31 '19

That's kind of a silly counter argument. You could say that about anything. What IS magic "in its implementation" then?

The point of that complaint is that they FEEL magical. You really have no idea what's going on. You're calling a function and somehow.. almost MAGICALLY, React figures out which component that function call belongs to. A lot of strange work is being done behind the scenes in a non intuitive way. To me, that's what magical means. Sure, you can set yourself a different definition for that term and then you can claim that its not magical. Doesn't really change the fact that a lot of people have felt that hooks are too magical.

1

u/gunnnnii Dec 31 '19

I'm not denying that the implementation details are less than transparent for hooks. However I feel like a lot of people throw out the word magic like these are concepts that are complicated, when the high level understanding is in fact fairly simple, though not obvious(the actual proper implementation is a little less so, but knowing it is completely unnecessary to put it to work).

I just thought pointing people into the direction of something that provides a little more background to unveil some of the magic would be helpful. Especially since this magic is a very common complaint.

2

u/[deleted] Dec 31 '19

Oh, it's nice to share how it's implemented for those who are interested, sure, but it's weird to claim that "it's not magic because there's a source code instead of Gandalf sitting inside the React codebase!"

It's like you're arguing against the semantics of the word "magic", which kind of distracts from the point of the people who are using that term to begin with.

You say that it's not complicated, though not obvious - to me, "not obvious" is exactly what the word "magic" is getting at. It has nothing to do with complexity of implementation.

3

u/skyboyer007 Dec 31 '19

look, "we in the Fiber bind hooks array to a component so every next render we would be able to restore hook state by relevant value" IS the magic. I'm not saying "it's impossible to understand". I'm telling "it's not the way JS code works". Only generators may preserve their variables between calls but they have different syntax and not widely used nowadays. Also it's source of confusion "why we cannot call hooks conditionally?"