---
# System prepended metadata

title: React.js Hooks
tags: [Technical Concepts]

---

# React.js Hooks

## 1. Why do we use hooks ?

- Reusable logics
- Split code to avoid large components with complicated logics
- Shorter and cleaner code

## 2. Rules of writing hooks: 

- Only call hooks from a top level
    Which means never calling a hook inside conditional statements and loops
    
- Only call hooks inside React functions or within another hook

- Always name your custom hooks starting from the "use" keyword

## 3. Some Important built in hooks: 

- useEffect()
- useCallback()
- useMemo()
- useReducer()
- useContext()
- etc.

## 4. Custom Hooks: 

- Custom hooks is a function that the name start with the word use and can manage life cycle, manage state and call other hooks

- Benefits of writing custom hooks: 
    +, Reusable code
    +, Helps keeps component code neat and clean
    +, Abstract operations, an example of declartive programming
    
## 5. Custom Hooks vs HOCs: 

Both of the approach allow us to re-use logics and operations with different react.js components. Hooks are more clean to implement. Here are some differences between the 2: 

![](https://i.imgur.com/IVD2EA0.png)


