Handful Hooks
Published: 2022-05-22 17:32:38

Hooks are backward-compatible, which are introduced in React16.8, it makes use of state and other react features without writing class components.

It does not introduce new concepts, helps in writing simplified and more understandable code implementing existing concepts.


>
Conventionally functional components are used for representational purposes, referred to as dumb or stateless components, but with the introduction of Hooks, we can implement all class-based components concepts with functional components.
>


🤔 Ever faced a situation where for earlier requirements you have implemented functional component, and now you have to implement state in component, provided you would have done it by converting it into the class component.


😇 Now simply just use Hooks to implement state in functional components.

There are Handful of Hooks which are handy and can improve the way of coding, which I will introduce in a bit.

---

## Why Hooks?
1. **Complex components with side effects:**
   components are easy to understand and build at the start 
   but growing stateful logic and side-effects including 
   fetching data makes it harder to understand and maintain, 
   while hooks make it easy by decoupling the logic.
2. **Classes confuses a lot:**
   while implementing class-based components you should have 
   known how to use this, scope, different life-cycle methods, 
   and their use-cases. Every time you refer to a function in 
   class component you should have bound it with this(class 
   context) to the function in the constructor or call it with 
   `this` context.
3. **Clean and neet code:**
   with Hooks, all class-based life-cycle and state management 
   can be implemented in functional components and easy to de- 
   couple the logic with Hooks. We can implement the same 
   logic with functional components in fewer lines.

## Hooks
Basic hooks which need to have look at when getting started with are **useState** and **useEffect**

With **useState** we can implement state management in functional components, syntax is likely

![useState hook implementation code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3aa69pxwni45coemjplh.png)

- **useState** returns two arguments, state variable, and state setter. 
- With **useState**, we can use any number of state variables.

```
Recommended way of setting state is:
setState(preState => {
   //use preState to create new state
   return newState
})
```

**useEffect** is another common Hook that can be used to implement class-based life-cycle methods like **ComponentDidMount** and **ComponentDidUpdate**. It also has a clean-up callback which is executed before every respective useEffect call.

> **useEffect** accept args array which is trigger useEffect on change of args in array, if given empty array only triggers at mounting


### useRef:

**useRef** can be used to refer Dom elements and can be used to create static content.

```
const ref = useRef(intialValue) and refered by ref.current
```

### useMemo and useCallback:

**useMemo** and **useCallback** are memoization purpose hooks, which also accept args array, trigger upon any args in array changes. Mainly used for computing expensive calculations and avoid doing it on re-renders.


![useMemo and useCallback implementation code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ucwpn3rgqsorithdu43.png)

### useContext and useReducer:

context Api can be implemented by using **useContext**, **useContext** will helps in consuming context value coming from the parent(context is created using React.createContext).

**useReducer** will help in maintaining complex state management, it works in the same fashion as Redux. We define reducers and dispatch actions to perform a required state change.

> Good use-case is using useContext and useReducer together, to create gobal or localised state for component tree. 

### React-router-dom Hooks:

**useParams:** to extract params from the URL.

**useHistory:** to use history API in component at any level.

**useLocation:** provide pathname, match, and location information.

### React-Redux Hooks:

react-redux provides hooks that make life easy, implementing redux logic using the hooks provided by react-redux is easy to understand and implement.

**useDispatcher:** return a dispatcher which dispatches actions to modify state

**useSelector:** to get a slice or select slice of the store from the global store.

**useStore:** returns the whole store which contains all store slices.

## Conclusion:
These are the hooks I feel come in handy and can be used commonly, although there are few other hooks that can be used on-demand. Explanation of each hook can be huge and can’t be done in one page so do explore the above hooks individually✌️