Intro to React Hooks- Part 1

During my final project review at Flatiron School, as I was going over the code of my React/Redux app with my assessor, she asked me if I knew about React Hooks. At that time I did not, and she went on to show me a couple examples and explain how powerful and useful they can be in cleaning up code and allowing one to write less lines of code with the same functionality.

I thought it would be useful to provide an overview of Hooks in React, explaining what they are and why they should be used, as well as highlighting some examples. This will be a new series of blog posts, so be sure to keep an eye out for the Intro to React Hooks posts to follow!

Before reading on, in order to best understand Hooks, you should already have an understanding of the basics of React such as functional and class components, props, state, lifecycle, etc. And for reference, here’s the official documentation: https://reactjs.org/docs/Hooks-overview.html

What are Hooks?

Hooks are a new feature addition in React version 16.8 which allow you to use React features, such as state for example, without writing a class. Previously, you could only use state within class components but thanks to Hooks that is no longer the case.

Something to keep in mind is that Hooks do not work inside classes, they specifically let you use React features without classes.

Why Hooks?

We’ll go over a few reasons for why the React team felt that there was a necessity for a feature like Hooks.

1. The first reason is that working with classes can sometimes bring on certain problems and extra things to worry about. For example, understanding how the this keyword works in JavaScript and remembering to bind event handlers in class components. Classes also don’t minify very well and make hot reloading unreliable.
2. The second reason touches on some of the more advanced React topics, such as higher-order components and the render props pattern. If you’ve worked with React, you’ll know that there is no particular way to reuse stateful component logic between components. The HOC (higher-order component) and render props patterns do address this problem, however you have to restructure your components (such as wrapping your components with several other components) which can result in awkward or poor looking code that is harder to follow. There is a need to share stateful logic in a better way, and this is where Hooks can help, as they allow us to reuse stateful logic without changing the component hierarchy.
3. The third reason has to do with how code is placed in a component, and the fact that complex components can become hard to understand. When creating components for complex scenarios such as data fetching and subscribing to events, you’ll realize that the related code is not organized in one place but rather scattered across different lifecycle methods. For example, data fetching is usually done in componentDidMount and also sometimes in componentDidUpdate. Another example is setting event listeners in componentDidMount and componentWillUnmount. As you can see, related code is separated in different methods but at the same time completely unrelated code such as data fetching and event listeners end up in the same code block (componentDidMount). In an ideal world all related code would be together, but because of stateful logic, components cannot be broken down into smaller ones. Thankfully, Hooks solve this problem as well because rather than forcing a split based on lifecycle methods, Hooks let you split one component into smaller functions based on what pieces are related.

Points of Note

Before we dive deeper into Hooks and go over some examples in the blog posts to come, there are a few points to address:

1. To be able to use Hooks, you have to use React version 16.8 or higher.
2. They’re completely opt in, meaning you can try Hooks in your components without rewriting any existing code, but they don’t have to be used if you don’t want to learn or use them.
3. They’re 100% backwards-compatible, Hooks don’t contain any breaking changes.
4. The React team has no plans to totally remove classes from React. You can continue to use classes and gradually start rewriting them with Hooks if it’s simple enough and you feel confident.
5. You can’t use Hooks inside of a class component, however your app can mix classes and functional components with Hooks.
6. Hooks don’t replace your existing knowledge of React concepts, instead they provide a more direct API to the React concepts you already know (props, state, lifecycle, etc.).

Summary

Before wrapping up Part 1 of this series, let’s recap:

1. Hooks are a new feature addition in React version 16.8
2. They allow you to use React features without having to write a class
3. The main reasons for the introduction of Hooks are: a. By not having to use classes, Hooks avoid the confusion of the this keyword and components minify better b. Hooks allow you to reuse stateful logic without changing your component hierarchy, and you can avoid advanced React patterns making your code much simpler to follow, and c. Hooks let us organize the logic inside a component into reusable isolated units, and related code can be put together helping to avoid bugs and inconsistencies

Now that you have a general overview and understanding of what Hooks are and why they were introduced to React, the following posts in this series will start introducing some examples of Hooks.