Hooks in react.js - Get Projects Help

Hooks are great features in react.js which helps in managing state of components and managing effects of changing of states. Hooks are used in functional components of react.js.

Most commonly used hooks are:-

1. useState hook

2. useEffect hook

What is useState hook in reactjs?

When different events happened in the frontend then the state of variable ,of objects or whatever type of data exists in the component. To manage the state in react.js we use useState hook

import { useState } from "react";
function App() {const [name, setName] = useState("abhinash");
const changeName = () => {setName("Abhinash Kumar Singh");};
return (
<div><p>My name is {name}</p>
<button onClick={changeName}> Click me </button></div>);}

export default App;

import {useState} function from 'react'

const [name, setName] where name is the veriable which stores the initial value and setName is function , if anything you want update in name then we can do through setName in which new data is passed through function.

Initial value of name is abhinash and after clicking the button 'Abhinash Kumar Singh' value is passed through setName after that value of name will be updated.

What is useEffect in react.js?

The effect hook takes care that what will be the effect of changing the state of anything present in the component. By default , it runs after the first render and every time when state is updated.

import { useState, useEffect } from "react";
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
    console.log(`You have clicked the button ${count} times`)
    });
    return (
    <div><button onClick={() => setCount(count + 1)}>Click me</button></div>)
    ;
    }
    export default App

import useEffect from react

useEffect takes a callback function and a dependancy array as parameter. Hooks are used to fetch data from external API. Whenever the value of count is updated , useEffect hook will run.

How to use dependancy in useEffect?

1.) To run useEffect only once

If anyone has to run useEffect only once then the dependancy array of useEffect must be empty means only empty array is to be passed as parameter. If state of anything changes will not effect useEffect hook.

import { useState, useEffect } from "react";
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
    console.log(`You have clicked the button ${count} times`)
    },[]);
    return (
    <div><button onClick={() => setCount(count + 1)}>Click me</button></div>)
    ;
    }
    export default App;

empty array is passed in useEffect so the useEffect will only be called only once.

2.) To run useEffect multiple times

If the state is passed in the dependancy array of useEffect then every time value of state is updated useEffect run.

import { useState, useEffect } from "react";
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
    console.log(`You have clicked the button ${count} times`)
    },[count]);
    return (
    <div><button onClick={() => setCount(count + 1)}>Click me</button></div>)
    ;
    }
    export default App;

count state is passed in the dependancy array of useEffect whenever state of count is changed useEffect will run.

Are you new to React.js or Just started learning and struggling with react.js project? We have team of react.js developer to help you in react.js project, assignment and for learning react.js at affordable price.

send your request