Originally published at: https://www.sitepoint.com/react-hooks/
React Hooks are special functions that allow you to “hook into” React features. For example, the useState hook allows you to add React state to a functional component. useEffect is another hook that allows you to perform side effects in function components. Side effects are usually implemented using lifecycle methods. With hooks, this is no longer necessary.
This means you no longer need to define a class when constructing a React component. It turns out that the class architecture used in React is the cause of a lot of challenges that React developers face every day. We often find ourselves writing large complex components that are difficult to break up. Related code is spread over several lifecycle methods, which becomes tricky to read, maintain and test. In addition, we have to deal with the this keyword when accessing state, props and functions. We also have to bind functions to this to ensure they are accessible within the component. Then we have the excessive prop drilling problem — also known as wrapper hell — when dealing with higher order components.
In a nutshell, hooks is a revolutionary feature that will effectively simplify your code, making it easy to read, maintain, test in isolation and re-use in your projects. It will only take you an hour to learn. Soon, you will start thinking very differently about the way you write React code.
React Hooks was first announced at a React conference that was held in October 2018. It was officially made available in React 16.8 last month. This feature is still under development — there are still a number of React class features being migrated into hooks. The good news is that you can start using them now. You can still use React class components if you want to — however, I doubt you will after you finish this introductory guide.
If I've grabbed your curiosity, let's dive in and see some practical examples.
Prerequisites
This article is for intermediate to advanced React developers. If you are a beginner, please go through the following tutorials first:
I won't cover how to create a new React project or other beginner-level skills. You should be able to follow this guide easily. You can access the completed project on GitHub.