An Introduction to React Hooks#

Conceptually, React components have always been closer to functions. The React team freely admits this. But before hooks arrived, these functional components (while more in line with the spirit of React) had limitations, most notably an inability to have their own state.

Before React v16.8.0 was released, in order to handle state or features like lifecycle methods (componentDidMount, componentWillUpdate, etc.) within React, the component utilizing these things had to be class-based.

And so, we had the stateful, class-based components responsible for fetching data and keeping track of state (often referred to as "container components") and the stateless functional components responsible for receiving data from the class components and displaying it ("presentational components").

Dan Abramov, one of the core React team members, famously wrote about them here back in 2015. He has since revised his stance with the release of hooks, but it's still an interesting explanation for the time.

But React Hooks turned that idea on its head, and with good reason.

This lesson will dive into why hooks were introduced to React to help us better understand the problems hooks are designed to solve while building applications.

Why hooks? What do I gain with them?#

The motivation behind hooks was to solve, as the React docs themselves put it, "a wide variety of seemingly unconnected problems in React that we’ve encountered over five years of writing and maintaining tens of thousands of components."

Although there are no plans to remove classes from React (backwards compatibility is important!), hooks provide a more direct API to React concepts you're probably already familiar with: props, state, context, refs and lifecycles.

And if you re-read the quote above, you might think to yourself: "Problems? What sorts of unconnected problems is the React team referring to?"

Well, problems you've most likely encountered if you've worked with React for any length of time.

Problems like:

Complex components become hard to understand#

As stateful components grow more complex, lifecycle methods that started out simple become unmanageable messes of stateful logic and side effects.

"Side effects" in React refer to any function that modifies variables/state/data outside of the scope of the current function that’s being executed (this can also known as an "impure function").

For example, if a function modifies a global variable, then it is considered a side effect. Similarly, if it makes a network call, it is also a side effect. This explains why we see references to side effects in React most often with lifecycle methods (and now useEffect Hooks).