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