Love-hate relationship with react hooks ❤️😏

React hooks! The new cool thing in the react eco-system right now! Its been just a year since the concept of react hooks has been introduced. Do you love react hooks or hate them?

Let me share my experience with react hooks. I hated them in the beginning. Now, I love using them in a few specific scenarios but still hate them in other scenarios. Let’s dive into it!

Ever heard of Javascript fatigue? In simple terms, Javascript fatigue is how there’s a new technology every week and JS developers run into using them and there’s a pile of libraries and frameworks stuck in this JS ecosystem.

Over a period of time, This fatigue has decreased and people are leaning towards well maintained and battle-tested technologies based on how useful they are for the current project but not everyone.

I think that most developers are using react hooks in their project just because it’s the new cool thing! They neither see the benefits of hooks nor try to understand the best practices in implementing hooks.

I’ve seen some devs re-writing their entire codebase just to use hooks. You don’t have to do that buddy! You are just wasting your time for nothing. Performance benefits are minimal to hardly noticeable. In addition to that, If you don’t implement hooks in the right way then you’re only making the performance worse!

First impressions on react hooks

What’s the first impression that you got while reading react hooks documentation for this first time? Don’t tell me you never read the docs! Some of them never read docs. Only googling randomly 😂

My first impression was that it is useful to add life cycle hooks and state for some functional components. There are other use cases but these are the main. But I never thought that hooks would be used to entirely replace class components with functional components.

First project with react hooks

I never re-wrote any of the old projects with hooks. I wouldn’t do that even now. It’s just a waste of time to re-write the entire project using hooks.

Then I got one project around 6 months ago which was written by some other developers. It was only around 4 or 5 months since hooks were released at that time. But they had already adopted it. I thought Okay cool, I get to play with react hooks!

Then I saw the code base!

The code readability with react hooks is terrible if you use them in large components. I want to stress this again :

Code readability with React hooks is terrible!
– A react enthusiast

No matter how good you are with react, Code readability with class components would still be a lot better compared to functional components with hooks

I also saw few mistakes that devs tend to make with hooks. The most imporant mistake is not using useCallback for functions inside a functional component! This is a very bad mistake.

Stuffing 10 functions and other calculations inside a functional component without useCallback! Now every time that component is re-rendered, all those functions and calculations get executed again which is terrible for performance.

Let’s cut the chase and talk about what I love and hate about hooks.

What I love about hooks

It is very useful in a few cases. Here’s an example – I had to handle the back button of several components manually in a react native project. In this case, it was very helpful using a custom hook.

Here’s the custom hook that i wrote

import { useEffect } from 'react';
import { BackHandler } from 'react-native';

export default function useBackHandler(handler) {
  useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress', handler);

    return () => {
      BackHandler.removeEventListener('hardwareBackPress', handler);
    };
  });
}

Now All I have to do is use the custom hook in any component that I want.

useBackHandler(someHandlerFunction)

It is very convenient and readable in this use case.

The same goes with use cases like adding a custom message listener or internet connection listener.

It is also useful for keeping related logic together. For example: BackHandler.addEventListener and BackHandler.removeEventListener in the above code are related to the same functionality and they are kept in the same place in case of hooks.

Same code in case of class components would have been separated because addListener would be in componentDidMount and removeListener would be in componentWillUnmount

It is also useful for smaller functional components which need to maintain just a single state property or minimal state. For example, a modal with open and close state. Functional components with hooks are great for this use case.

So I get it, hooks are useful in few cases and I love using them in such cases. But I still don’t get why do you need to use hooks for your entire project and every component!

What I hate about hooks

Terrible readability

As mentioned earlier, Terrible readability! I have to read a functional component with hooks thoroughly for some time to understand what’s going on there!

In case of normal class components, Just one glance and you understand what’s going on in that component.

Stuffing functions with useCallback inside a functional component?

What’s going inside those multiple useEffect blocks without names? Only comments can help 😭

No guidelines for beginners

Beginners tend to make a lot of mistakes with hooks. Specifically not using useCallback, stuffing a lot of functions inside one functional component.

Inserting wrong dependencies in useEffect blocks

React docs doesn’t even try to warn the developers not to follow such bad practices. They don’t guide the developers with best practices.

React team had introduced an eslint plugin which helps in finding some errors such as exhaustive deps rule etc. but it still doesn’t really help that much.

React team should implement some proper guidelines for hooks so that developers can follow them for the best performance, readability and maintainability.

Easy to make mistakes

Writing useCallback for every function? You don’t have to do that for good old class components.

Wrapping up

So yea I would use hooks in my project but only for few smaller components. I would stick to class components without any hooks for every other use case. I may be right or wrong. This is just my opinion. Do let me know your thoughts. That would help me learn better 😊