React Hooks : useState Basic Concepts

React Hooks are an addon in react that helps us to handle state and other features within functional components instead of rewriting the entire functional components to a class component.

Function component look like this :

function HooksExample(props){

    

    return <h1> Hello {props.name} </h1>

}

Let's see

How we can make use of useState Hook, which is equivalent of this.state / this.setState for functional components.

Importing be like :

import React, {useState} from 'react'

As function component accepts props as an argument and returns a react element,useState lets us to 

add React state.

export default function Heading(){

    const [title, setTitle] = useState("Hook Example")

    

    return (

        <button onClick = {()=>setTitle("Hook Usage")}>

        

        {title}

        

        </button>

        )

}

We call useState inside function component to maintain a local state

 useState returns:

* Current State Value

* A function that let's us update the state

It's similar to this.setState in a Class