The Four Things That Made Me Fall In Love With React Hooks: Part 1
React Hooks are the new hotness in the world of front-end development and the rush to adopt them has been strong. These days I embrace the hook, but I admit that it hasn’t always been this way.
When I first started using hooks I really didn’t get what all the excitement was about. Components written using hooks felt so much less structured than class-based components, and the more complex the component got the more unstructured it got. It wasn’t clear when things were happening: what events caused the component to re-render? What order did the hooks run in? And on top of this it felt like there was a lot of opaque stuff going on in the background to make the hooks work.
These days, however, I lean into the hook. I feel that they let me write code that is more expressive, powerful and (dare-I-say-it) reactive than with classes. So if you were ever like me and sketpical about hooks, join me on this series as I walk you through the four realisations that have turned me from a hook skeptic to an enthusiast.
Part 1. Nothing Compares 2 Hooks
When you’re using hooks, all of your component’s lifecycle methods are replaced by one thing: useEffect.
This can initially be a bit disorientating: as if someone had stolen your clothes when you were in the pool and now you have to go about your day wearing only a towel. It’s a bit weird and cold at first, but pretty soon you realise that you’ve been set free. The bathtowel covers you like clothes, but unlike clothes you can also dry yourself with it, sleep under it like a blanket or soak it in water and use it to fight off the crowds of people who are outraged at your nudity.
You can do lots of things with the useEffect hook that you can't do with lifecycle methods, but it’s a bit confusing at first because its a really powerful function that’s used all over the place - but it’s always called the same thing. However, it doesn’t have to be.
Through the magic of custom hooks (hooks that we write ourselves and are really just functions that encapsulate some logic that uses a react hook) we can call our variations of useEffectwhatever we want:
Of course, you shouldn’t just use useEffect like this, because you’d be limiting yourself from the power and flexibility that it offers. useEffect operates at a lower level than the lifecycle components that hook into changes on the component and lets you react to those changes directly and on a more granular level.
Say we wrote a componentDidMount for fetching a piece of data, setting it to the state and attaching an event listener, like so:
We have only one way to hook into the ‘mount’ event of the component — by overwriting the componentDidMount method on that class.
Our hooks-based component would look like this:
The useEffectwill run when the compononent first renders, request the user, fetch the data and rerender the component when the data is received by calling setJson . Here, we don’t need to replicate componentDidMount because we are hooking directly into the function’s execution and render loop.
Of course, this doesn’t give you much benefit over the class method. In the next part of this series, we’ll see how hooks let you abstract code like this into reusable chunks. Follow me to get notified when it’s out!
PS Check out the react-use library to see an awesome collection of custom hooks and get inspired by what hooks can do.
