All You Need to Know About React Hooks

Master the use of React hooks

Photo by Cristian Palmer on Unsplash

React hooks introduced in 16.8 lets you use state and other features that previously were only possible with class components. It lets you write less and cleaner code, which results in a better bundle size, with that a better performance and overall a better developer experience as well.

In this tutorial, we are going to look through the most commonly used hooks in React. In order they are:

• useRef
• useState
• useReducer
• useEffect
• useCallback
• useMemo
• useContext

At the end of the tutorial, we will also be taking a look at how you can write custom hooks. Before jumping into looking at what each hook does, let’s see what are the rules of using them.

Rules of Hooks

When it comes to using hooks, there are two things you need to keep in mind. First and foremost, you can only use hooks in functional components.