React Hooks
Published: 2024-02-22 14:33:42

_<u>**Hooks**</u>_
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z8h8mfkgjy5pg6hlnulh.png)


**_<u>Why Hooks</u>_**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hn7hghji50rojtqz19zj.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dami33lbr0a32cfqt6o.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2ys2opydt3e2ovpusr8.png)


**Hook Rules**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dq6whgbqf79ws5296j1z.png)

**Syntax**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5j7zwblsqe73uvzgf1sj.png)

In a hook -> A state variable can be ->
1. A number
2. A string 
3. Boolean
4. Object 
5. Array

If we have use dan object as set state and modified a part of it and then some other part it doesn't merge them and update but updates them independently and so they are rendered on screen as different entities so to rule that out we us ethe spread operator to give the whole object value first and then modify a part(s) of it.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ue5gtfxr8jlkybs7a88f.png)

**Hooks with Arrays**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/um6flxjf98ebj2jjrus7.png)

**Things to remember while dealing with hooks**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khnsr4z215mv8hh58185.png)


**useEffect**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63iyc328u77i03oncoxf.png)
It is basically whenever the component renders or update in rendering on screen this useEffect() gets triggered and what we define under this is what function we want to trigger. Here we have defined an arrow function.

**In a class component**

A simple condition will help us to not re-render unnecessarily.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f96hf39dcz3tqwvbc52d.png)

**Similarly with Functional Components**

We can use useEffect() to do the same by adding the state or prop to be checked if it has updated or not if it's not then useEffect() isn't executed.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76jhh1a9q1qpp2zd4f3m.png)


**How to mimic ComponentWillUnmount() in a Functional Component**
With the help of removeEventListener()

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3uj68zwimvc4xn35vmpt.png)

**Tick in Hooks**
To mention the state variable that we need to re-render needs to be mentioned in the dependency array (a.k.a the array that is passed to useEffect()). This is how we re-render specific state variables.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/agsb5h0bdyc91mygg2oh.png)

**OR**
By using state variable's prevState to update the new state and re-render it on screen.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vg8xubkkt8prbvoxyk1l.png)

**Multiple useEffect to group the data**
This groups relevant data together and use multiple useEffect -> Notice how we have a state variable declared and a corresponding useEffect for it. This solve the problem of  "relevant data far apart" in CLass Components 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l33izh3nrzjli3xdr0vh.png)


**_<u>Context</u>_**

**Defining context in parent component**


**Using context in child component**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jo6p6t97w9lnrp14wjeu.png)

_<u>**Shortcut for using context**</u>_