I've been reading about hooks and some of their benefits, but it seems like there's some comparisons between apples and oranges, and at high level, hook components are just faux-classes with dependency injection. For example, classes setState vs hooks setState. You cant really compare the two because they behave differently. The difference in behavior is not due to functions or classes, but because of react implemented the two functions. The values from useState and other hooks are just faux class properties that get resolved by a dependency container, and are created and destroyed after every render. It seems like react is saying to use hook components over classes because classes confuse people and machines, but are essentially using class concepts, but calling them something else. Good and bad code is independent of classes and functions, and depends on how much you break down the problem into small pieces, so moving to functional components with hooks seems like a lateral movement. I really like the concept of useEffect, but am missing why it's behavior couldn't be ported to classes. I'm not seeing how nested functions are cleaner than class functions.
2 Answers
Hooks are revoulutionary imo. I worked with classes for a very small time and was happy to discover hooks.
Here is a small list of obvious improvements:
Hooks will save you a lot of boilerplate. You don't have constructors with super(props) anymore. Also you get rid of this and especially the cumbersome .bind(this) calls.
You can seperate your state with multiple useState hooks instead of having a very big state object. Also you can easily reuse similar state logic or logic in general with your own custom hooks. This actually is one of the biggest benefits since you get rid of renderProps and mostly HOCs too. You have just one simple and intuitive way to share logic across components.
The other thing is that you get rid of the Consumer part when using context and simply use useContext.
useEffect completely replaces all life cycle hooks and eliminates the awkard use of ComponentWillReceiveProps with the dependencies array.
In general I think it's way more intuitive to work with functions and hooks instead of classes. In fact you only need functions now whereas before you had to use class components for stateful components and should use functions for stateless components. This alone shows how using functions over classes was desired all the time but it was just not possible back then.
I recommend listening to the react podcast if you don't. They often have people from the React team to talk. From that I have gathered that there are things that cannot be accomplished with classes that can be accomplished with functional components (or are really hard to do with classes). A good one to listen to is the react-spring one which describes the changes hooks provided them. People who know a lot more than I do talk about it.
I think the team made an intentional movement away from classes for the issues it provides. Here is an example from the docs about minifying and AOT:
As Svelte, Angular, Glimmer, and others show, ahead-of-time compilation of components has a lot of future potential. Especially if it’s not limited to templates. Recently, we’ve been experimenting with component folding using Prepack, and we’ve seen promising early results. However, we found that class components can encourage unintentional patterns that make these optimizations fall back to a slower path. Classes present issues for today’s tools, too. For example, classes don’t minify very well, and they make hot reloading flaky and unreliable. We want to present an API that makes it more likely for code to stay on the optimizable path.
To solve these problems, Hooks let you use more of React’s features without classes. Conceptually, React components have always been closer to functions. Hooks embrace functions, but without sacrificing the practical spirit of React. Hooks provide access to imperative escape hatches and don’t require you to learn complex functional or reactive programming techniques.
If anyone can point to more specific documentation on the issues with classes functional components avoid, feel free to add.
I used to only want to use classes because I came from a more traditional object oriented programming language before going to the web, but I'm starting to embrace Javascript's first class functions.
