Hooks are functions that let you “book into” React State and Lifecycle features from function components.
Hooks allow you to use react Without classes. It means you can use State and Other React features without writing a class/
React Provides a few built-in Hooks like useState, useEffect, etc.
Hooks are a new Addition in React 16.8
When you use Hooks,
Rules of Hooks in Reactjs
Only call hooks from React functions – We should not call Hooks from regular javascriptt functions. Instead, call Hooks
from react function components from custom Hooks
React relies on the order in which Hooks are called.
Hooks don’t work inside class
useState Hooks in Reactjs (Builtin Hooks):
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.
We State returns a pair – the current state a value and a function that let you update it.
React will preserve this state in an event Handler or somewhere else.
Example:
Import React, {useState} from ‘react’;
useState(“Rahul”)
(importing useState Hooks From React)
const nameStateVariable=useState(“Rahul”);
const[name,SetName]= useState(“Rahul”);
When we declare a state with useState, it returns a pair- an with two items, so By writing a square bracket we are doing Arry Destructring.
Const nameStateVariable = useState(“Rahul”)
//First Item of Array
Const name = NameStatevaribale[0]
//First Item is current value
const SetName= NameStateVariable [1];
The second is a function that let us update it
useEffect is a hook for encapsulating code that has “side effects”. If you are familiar with react class Lifestyle methods, You can think of useEffectHooks as component Did Mount, CompoinentDisUpdate, and ComponentWillUnmount combined.
Ex:
Import React {useState, useEffect} from ‘react”;
useEffect(function)
useEffect(Function, Array)
* The function to useEffect will run after the render is committed to the screen.
* Second Argument to useEffect that is an array of values that effect depends on.
Note – you can call useEffect as many times as you want.
useEffect()
useEffect(() => {
console.log(“hello useEffect”);
});
useEffect(() => {
console.log(“Hello useEffect”);
},[count])
What does useEffect Do?
By using This Hook, you tell React that your component needs to do something after rendering, React will remember the function you passed and call it later after performing the DOM updates. In this effect, we set the document title, we could also perform data fetching or call some other imperative API.
What is useEffect Called inside a component?
placing useEffcet inside the components lest us access the state variable or any props right from the effect.
yes! By default, it runs both after the first render and after every update.
App.js
import React from ‘react’
import ReactDom from “react-dom”
import App from ‘./App’
function App () {
const [count, setCount] =useState(0);
return(
<React.Fragment>
<h1> Countup: {count}</h1>
</React.Fragment>
)
export default App;
}
Final Conclusion on All You Want to Know About Hooks in Reactjs
We really hope that you all have liked this article really very much.
Kindly please share with your friends and family too..
