React Hooks with examples( useState, useEffect, useContext ).
Tags: react, codenewbie, javascript
Published: 2021-02-14 09:18:27

Hey! Programmers. Have you ever thought about how React helps us in making a complicated site or an application ?. To develop a large scale application we need to handle a bunch of states and data throughout our application and this in result requires a complicated and well maintained but yet a fragile codebase. This Fragility of the codebase is kind of obvious due to many states and use cases remained UN-handled. To solve this problem React was made available and provided us with many advantages.

One of the main advantages of React framework after the component lifecycle methods is `REACT HOOKS`, think of it, as an abstract to reduce the code written while using class-based components and lifecycle methods. 

- Reduces Code.
- Improves scalability.
- Provide a clear meaning to the data flow.

This post consists only useState, useEffect, useContext Hooks. So without wasting anyone time let's just jump right into understanding each of them together.

# useState Hook

syntax: ```js
const [state, setState] = useState(initialState);
``` 

terminology: 
- **`state`**:  the data that is inside the state and ready to be used.
- **`setState`**::  this helps in changing the state that is initially set to some value and ready to be manipulated via some functions or an event.
-  **`initialState`**: The initial state that is set by default as a component renders which got change afterwards.

The complexity that can be increased to use `useState`

```js
const [state, setState] = useState({
  array[], // array of string, object, number etc.
  object,  // object
  string,
  number
});
```

Examplar CODE :

```js
import React, { useState } from "react";

function App() {
  const [like, setLike] = useState(0);

  return (
    <div>
      <h3>💜 : {like}</h3>
      <button onClick={() => setLike((liked) => liked + 1)}>
        Like 👍
      </button>
      <button onClick={() => setLike((liked) => liked - 1)}>
        unLike 👎
      </button>
      <button onClick={() => setLike(0)}>Reset</button>
    </div>
  );
}

export default App;
```
Explanation: 

- The first statement is for importing the hook from react library.
- The 3 Rules to remember while using useState.
```js
const [like, setLike] = useState(0);
//Rule 1: This statement means that initially like value is: 0
//Rule 2: After any event, we need to manipulate like using setLike.
//Rule 3: And log `like` to see the state change.
```
- The Code to increment likes. In this code, when `onClick` Event is trigerred we call `setLike` and increment the value by passing an iterator `liked` and incrementing liked state whenever user clicks to like button.
```js
<h3>💜 : {like}</h3>
<button onClick={() => setLike((liked) => liked + 1)}>
  Like 👍
</button>
```
- The Code to decrement likes. In this code, when `onClick` Event is trigerred we call `setLike` and decrement the value by passing an iterator `liked` and decrementing liked state whenever user clicks to like button.
```js
 </button>
 <button onClick={() => setLike((liked) => liked - 1)}>
  unLike 👎
</button>
```
- To `RESET` the state, i have just reset the state to `0` by calling `setLike` and explicitly returning `0`.
```js
<button onClick={() => setLike(0)}>Reset</button>
```

Screencasts: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jts0qyb2w4y57dfkz4n6.gif)

{% codesandbox usestate-hooks-xbgv8 %}

This blogPost is short to help you digest what you have learned. Need to wait for `useEffect` and `useContext`. will link it soon. 

Thanks for Reading.
Happy Coding.

Please Do Comment!

Dont's Stop Learning Next BlogPost.

 {% link https://dev.to/uyadavdev/context-api-hooks-building-minimalist-dark-mode-33b6 %}