Get Started with React Hooks

Hello Everyone 👋!

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????? 😮

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 ❤️ 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 ✌️

• 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() ⚡

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 ❔

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 for a detailed understanding.

Thanks for Reading!

I love to appreciate your enthusiasm to learn more.

I'm Phani Murari

Instagram
LinkedIn

CodeIsPeace