Hooks in Reactjs: Hooks are a new addition in React 16.8. They allow you to use React without classes. It means you can use state and other React features without writing a class.
Hooks are functions that let you “hook into” React state and lifecycle features from function components. React provides a few build-in Hooks like useState, useEffect, etc.
When use Hooks:
If you write a function component and realize you need to add some state to it.
Rules of Hooks:
- Only call Hooks at the top level:- We should always use Hooks at the top level of your React function. We should not call Hooks inside loops, nested functions or conditions.
- Only call Hooks from React Functions:- We should not call Hooks from a regular javascript function. Instead, call Hooks from React function components or call Hooks from customer Hooks.
- React relies on the order in which Hooks are called.
- Hooks don’t work inside classes.
Declaring State:
useState():- useState is a Hook that allows you to add React state to function components. We call it inside a function component to add some local state to it. useState returns a pair – the current state value and a function that allows us to update it. We can call this function from an event handler or somewhere else. React will preserve this state between re-renders.
When we declare a state variable with useState, it returns a pair – an array with two items. So, by Writing the square bracket we are doing Array Destructuring.
Example:-
|
2 3 4 5 6 7 8 |
import React, { useState } from 'react'; // Declaring State using useState Hook const [name, setName] = useState('Tutorialswebsite'); |
name = It is the current value;
setName = It is a function that allows us to update it.
Note: – You can call useState as many times as you want.
|
2 3 4 5 6 7 |
function Employee(){ const [name,setName] = useState("Pradeep"); } |
Declaring multiple state variable:
|
2 3 4 5 6 7 8 9 10 |
function Employee(){ const [name,setName] = useState("Pradeep"); const [empid, setEmpid] = useState(123); const [age, setAge] = useState(28); } |
Accessing State:
In a function, we can use a state variable directly. As in class-based component, we need to use this.state.value, but in function component, we don’t need to use this.state.
|
2 3 4 5 6 7 8 9 10 11 12 13 |
function Employee(){ const [name,setName] = useState("Pradeep"); } return ({ <> <h1> Your Name is {name} </h1> </> }); |
Updating State:
We will use the second item from a pair of the array as a function to update State value.
Ex: –
|
2 3 4 |
setName("Tutorialswebsite"); |
Let’s understand all the above point using a complete coding:
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React ,{useState} from "react"; import ReactDOM from "react-dom"; function Employee() { const [name, setName] =useState('Pradeep'); const [empid, setEmpid] =useState(28); const btnClick=()=>{ setName("Tutorialswebsite"); setEmpid(30); } return( <> <h1>Your Name is {name}</h1> <h1>Your Empid is {empid}</h1> <button type="button" onClick={btnClick} >Click Me</button> </> ); } ReactDOM.render(<Employee/>,document.getElementById("root")) |
In the above code, you can see that we declare the state as name and age. Also, we created a button “Click Me” using an onClick event handler “btnClick”. When we click on button then name and age state value will set using btnClick function. After this, the value of name and age state value will return and reflect on the screen.
Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co
