Generally when a React Developer is asked, 'what are the advantages of hooks or why hooks were introduced?', the most common answer would be: "So that we can have state in functional components". Even I used to give the same answer before I knew better. The answer is not wrong but having state in functional component wasn't the main motivation for the introduction of hooks, it was just the by-product.

In this post, I would be explaining in detail the motivation behind introducing hooks and the problems that they solve. You can find a detailed video on hooks introduction by Dan Abramov over here if you are interested to watch.

Problems & Solutions

1. co-related logic getting scattered in different lifecycle methods

componentDidMount () {
    this.updateData(this.props.id)
    this.addEventListener("mouseover", handleMouseOverEvent);
  }

componentDidUpdate (prevProps) {
    if (prevProps.id !== this.props.id) {
      this.updateData(this.props.id)
    }
  }

updateData = (id) => {
    this.setState({ loading: true })

    fetchData(id)
      .then((data) => this.setState({
        data,
        loading: false
      }))
}

componentWillUnmount () {
    this.removeEventListener("mouseover", handleMouseOverEvent);
}

In the above code, the logic to update the state is scattered in different lifecycle methods. Also, imagine a situation where someone adds a new event listener, and misses removing the event listener as it is not in the same lifecycle method. Below is the same implementation with Hooks.

useEffect(() => {
    updateData(props.id);
    addEventListener("mouseover", handleMouseOverEvent);

    return () => removeEventListener("mouseover", handleMouseOverEvent);
}, [props.id]);

As you can see with the above code the co-related logic of updating state and adding/removing of event listener is placed together and it even reduces the lines of code significantly.

2. "Wrapper Hell" created by the Higher Order Component and Render Props design pattern

This is how a nested render prop look. Messy right? Hooks help solve this issue by abstracting this code into different hooks (functions)

Same is the issue with Higher Order Components.

3. Code using Hooks tends to minify better than equivalent code using classes

4. You don't have to manually compare your props, the dependency array does it for you internally

componentDidUpdate (prevProps) {
    if (prevProps.id !== this.props.id) {
      this.updateData(this.props.id)
    }
  }

With class-based components you have to add 'componentDidUpdate' lifecycle method where you would have to explicitly compare the previous props with the current props.

useEffect(() => {
    updateData(props.id);
}, [props.id]);

With hooks, 'useEffect' takes care of the change in props by adding them into the dependency array.

These were some of the problems that are solved by the introduction of hooks into React.