Skip to content

Instantly share code, notes, and snippets.

@samsch
Last active September 29, 2019 19:58
Show Gist options
  • Save samsch/e0c8b438ee51703c12ad92cb20442ecc to your computer and use it in GitHub Desktop.
Save samsch/e0c8b438ee51703c12ad92cb20442ecc to your computer and use it in GitHub Desktop.
What is not wrong with Hooks

Addressing some concerns and questions about React Hooks

We don't need another type of component, classes work fine!

[or] Why do function components need this, we already have the functionality in classes? Won't that just be confusing which to use?

This is directly addressed in the React Conf talk and the intro page here: https://reactjs.org/docs/hooks-intro.html

Classes have several problems, one of the biggest being that this handling and binding is a very common source of mistakes for both new and experienced developers.

Hooks are meant to replace the entire usage of class components for new code. Classes will not be removed from React, but Hooks will be recommended instead of classes for all purposes going forward once they are in a stable release.

New devs will have to learn two different kinds of components now!

This is largely true, and understood by the React team. Their stance is that it's an acceptible tradeoff that new users may need to learn class components in addition to Hooks to be able to understand and use older code. The opposite side of the tradeoff is that Hooks are expected to be easier to learn and work with, and don't have the downsides of classes as explained in the links above.

It is expected that a significant part of new code will start using Hooks. My personal conjecture is that unlike for an incremental or less obvious change, it will be relatively easy for a newbie to discern between class component and Hooks example code.

Hooks can't do X though!

They probably can, but if you think there is a use-case they don't cover, definitely come ask about it in relevant channels (#reactjs on Freenode IRC, Reactiflux Discord, possibly Stack Overflow, etc). If a case it found where several developers aren't able to find a way to do something with Hooks, then you should search for it in the RFC thread, and add it if it's not already been answered or solved.

Remember, Hooks are in Alpha, they are not finalized, and the React team has some things they want to fix before they would release.

[Updated 2019-09-29] Hooks are well established as part of React, with extremely wide usage. If you aren't sure how to do something with them, search the web or ask in the above mentioned channels. If you are confident you found something hooks can't do that classes could (outside of the known missing features of course), I recommend discussing it with other devs in #reactjs or Reactiflux, and then if it makes sense, you can make an issue in the React Github repo.

Hooks are ugly and I don't like them

Did you feel the same way about JSX when you first came across React? I did! The React team is working on building the best solution: sometimes that's not the most comfortable for developers used to something else.

Hooks aren't declarative!

Hooks use a code style usually associated with imperative style coding, but the way Hooks are setup is nearly the most declarative way to define a flow of values which are being returned from and passed as arguments to functions. It's possible to write similar code with highly functional styles in JavaScript, but this is even less familiar for many or most developers.

Remember that the whole point of how React renders is that you are fully defining the entire view every time you render. That React enabled this style of writing your view without having terrible performance is the reason it become popular in the first place. Hooks extends this idea of describing your entire view in a single render to also include the stateful and effect-y parts of the React tree.

Hooks let you put too much logic in React components!

From state and logic handling points of view, Hooks don't add any more ability to put your business logic in React components than classes (or the older createClass) do. Hooks are a simpler way to define the same types of functionality, while adding the ability to more easily modulize sub-component levels of functionality through custom hooks.

If you want to fully decouple your application from React, you should use neither class components or Hooks, and write only functional components (or possibly render-method-only PureComponents). (Yes, this is hyperbole)

These are global methods! They are magic!

They are actually fairly simple to understand. The function references are attached to the React object, but since React itself knows about when it's rendering a component, the function calls are effectively scoped to the component they are in.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment