react hooks, useState(), react hook useState(),Reactjs,

Introduction to React hooks

In this blog we are going to learn about UseState() hook which is a first hook to learn in ReactJs. Before React 16.8 class based approach is popularly used it's not that feasible to inherit data for other components. Then React Developers came up with a solution with functional approach & hooks which almost reduced redundancy, improved simplicity & efficiency.

Sample code using Class based Approach

import React from 'react';

Class  LoginComponent extends React.component {
    State ={
        userLoggedin = "false",
    };

    loginHandler() {
        this.setState( {userLoggedIn : "true"} );
    }
    cancelHandler() {
        this.setState( {userLoggedIn : "false" } );
    }
    render() {
        return(
            <div>
                <input type='text' placeholder='Enter User Name' />
                <input type='text' placeholder= 'Enter Password '/>
                <button type='submit' onClick={ () => this.login() }  > Login </button>
                <button onClick={ () => this.cancel() } > Cancel </button>
            </div>
        )
    }
}

Export default LoginComponent ;

In above code individual functions used to change the state variable value based on the form buttons events which may not be accessible for other components due to class based approach. For smaller codes we can manage it to proceed with class based approach but it won't looks similar for huge applications we may occurs many issues, so take a look at below code modified using React Hook UseState() which perform similar task as above code.

Sample code using React UseState() Hook

import React from 'react';

const LoginComponent = () =>{
     const [userIsLoggedIn, SetUserLoggedIn] = useState('false');

     const loginHanlder = () =>{
          SetUserLoggedIn('true');
          console.log("user logged In");
     }
     const cancelHandler =() =>{
          SetUserLoggedIn('false');
          console.log("user Not Logged In")
     }
     return (
          <div>
               <input type='text' placeholder='Enter User Name'/>
               <input type='text' placeholder='Enter Passwrod '/>
               <button type='submit' onClick={loginHanlder }>Login</button>
               <button onClick={cancelHandler}> Cancel</button>     
          </div>
)     
};

export default LoginComponent;

Usuage of UseState() :

Firstly we need to import hook from 'react'

import React, { UseState } from 'react';

Initializing / configuring variable with default value

const [userIsLoggedIn, SetUserLoggedIn] = useState('false');

here userIsLoggedIn is assigned to false by default, if we keep useState('') default value will be Null / Empty

What does UseState() returns

It returns a pair of values: the current state and a function that updates it. In our example, the current state is userIsLoggedIn and the function that updates it is setUserLoggedIn. Here setUserLoggedIn is going to behave the same as setState from the previous example.

Notice in LoginHandler and CancelHandler setUserLoggedIn() is used to update value of userIsLoggedIn.

You can visit React website for more info useState()-hooks-official

Pavan Kalyan's Blog