Get Started with React Hooks
Tags: react, javascript, beginners, hooks
Published: 2022-05-29 19:23:42



# Hello Everyone :wave:!

In this post, let's learn about the React Hooks.


## What is React Hooks ?

Hooks are a new addition in React 16.8. it will let you use state and other React features without writing a class.

**Wait! Without class?????** :open_mouth: 


**Yes**, without class we can **use React features** using the React Hooks.

Okay! great but why React Hooks when i am super familiar with Classes.


## Why React Hooks?

Check the below to understand why Frontend Dev's loves :heart: the React Hooks.

- Reduce the burden to think about whether we have to use the class component or function component, _Always go with a function component_ :v:

- Reuse the logic between the components easily.

- More power with less lines of code and many more.

- Industry is moving towards and gradually adapting React Hooks.

I am hoping that you got some Good reason to learn React Hooks.

Let's understand the one of the basic hook - useState() provided by the React.

## useState() :zap:

Let's understand the `useState()` hook by comparing with the `state` object in class component.

In class component we have the **state** object, we will store the data in the state that changes within the time.

But how to use state in the function component :grey_question:

With the help of **useState()** hook you can add state to the function components as well.

**Syntax**

```
const [currentState, setterFun] = useState(initialValue)
```

**Example**

A simple **Counter** example to understand the implementation of **useState** hook

```
import { useState } from "react";

function ClickCounter() {
  const [count, setCount] = useState(0);
  // Here count - currentState
  // Here setCount - setterFun

  const onClickButton = () => setCount(count + 1);
  // When the button clicked incrementing the count(currentState) by 1

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={onClickButton}>Click me</button>
    </div>
  );
}

export default ClickCounter;
```

We can update the state by using the callback function if the next state is computed based on the previous state

In the above counter example, the state incremented value is based on the previous state. Hence we have updated the state by using the callback function.

```
import { useState } from "react";

function ClickCounter() {
  const [count, setCount] = useState(0);
  // Here count - currentState
  // Here setCount - setterFun

  const onClickButton = () => setCount((prevState) => prevState + 1);
  // When the button clicked incrementing the count(currentState) by 1

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={onClickButton}>Click me</button>
    </div>
  );
}

export default ClickCounter;
```
#### Let's understand how to declare the multiple state variables.

Yes, you can declare the multiple state variables using the **useState** hook multiple times as shown below.

```
const [stateVariableOne, setterFunForStateVariableOne] = useState(initialValue);
const [stateVariableTwo, setterFunForStateVariableTwo] = useState(initialValue);
const [stateVariableThree, setterFunForStateVariableThree] = useState(initialValue);
```

Refer to the official documentation of [React Hooks - useState](https://reactjs.org/docs/hooks-reference.html#usestate) for a detailed understanding.

Thanks for Reading!

I love to appreciate your enthusiasm to learn more.

#### I'm Phani Murari

[Instagram](https://www.instagram.com/im_phani_murari/)
[LinkedIn](https://www.linkedin.com/in/phanimurari/)

#CodeIsPeace