You might be wondering why even bother with React Hooks if working with classes has been going well. Or perhaps you might’ve even just ignored it, thinking it’s not really applicable for your application.
Well, I’m here to dispel all (some… probably just a little 😅) of your worries about React Hooks.
To start, you’ve probably already heard of some of the typical benefits. But let’s go over them quickly regardless.
- Functional Components instead of Classes (less bulk, less refactor)
- No more confusing usage of
this.(or binding to it!) inside your code - Hooks allow for easier decoupling of UI and everything else (reusability)
- Hooks separates code based on what the code is doing, not based on the lifecycle method
- Custom Hooks allows for easy code/component reusability for similar functionality
- Hooks help alleviate wrapper hell by providing reusability through custom hooks without the use of HOC/render props
The bottom line is this: Hooks provide the same functionality (and more!) of classes with the “side effect” of having cleaner and simpler code. Creating a more robust and easily maintained codebase.
If you’re still unsure of the benefits, here’s the video for when Dan Abramov introduced hooks. It’s always a good watch for learning how hooks work and how it can change the way you use React, in a good and cleaner way.
In particular, one thing I love about hooks is the reusability and being able to share custom hooks with one another. For example, check out https://usehooks.com/ for tons of custom hooks that allow you to save a lot of time figuring out how to do something that everyone else already has figured out.
Sometimes a picture is worth a thousand words. Here’s an example of what it looks like with Classes vs Hooks
Finally, even if you still don’t want to change any existing code that’s working just fine, it’s okay. I get it, it can be rough changing to hooks, but that’s okay. You can just start with using React Hooks in any new components and code you write. It works just fine with existing classes.
If there’s one thing I want you to take away from this, it is that you should at least be writing any new React code with Hooks. It is simply a cleaner and simplified way to do what React always has done.
