useEffect Hook in ReactJs

     By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. In this effect, we set the document title, but we could also perform data fetching or call some other imperative API.

Without Using useEffect

import './App.css';

import React, { useState } from 'react'

export default function App() {
  const [state, setState]=useState(0);
  const btnClick=()=>{
    setState(state + 1)
    {
      alert('i am click')
    }
  }
  return (
    <div>
       <button onClick={btnClick}>Count {state}</button>
       
    </div>
  )
}

 

Using useEffect

import './App.css';
import React, { useEffect, useState } from 'react'
export default function App() {
  const [state, setState]=useState(0);
  useEffect(()=>{
    alert('i am click');
  },[]);
  const btnClick=()=>{
    setState(state + 1)
    }
  return (
    <div>
       <button onClick={btnClick}>Count {state}</button>
       
    </div>
  )
}

If Button click title will be change

import './App.css';
import React, { useEffect, useState } from 'react'
export default function App() {
  const [state, setState] = useState(0);
  useEffect(() => {
    // alert('i am click');
    document.title= `you clicked me ${state}`
  })
  const btnClick = () => {
    setState(state + 1)
  }
  return (
    <div>
        <button onClick={btnClick}>Count {state}</button>
    </div>
  )
}

Output

import React, { useState, useEffect } from 'react'
export const UseEff = () => {
    const [btn, setBtn] = useState(0);
    useEffect(() => {
        if (btn >= 1) {
            document.title = `Click ${btn}`
        }else{
            document.title = 'click'
        }
    })
    const btnClick = () => {
        setBtn(btn + 1)
    }
    return (
        <>
            <h1>{btn}</h1>
            <button onClick={btnClick} className="btn btn-primary">Click</button>
        </>
    )
}
export default UseEff;

UseEffect Dependancy

    if btn State value will be change, so useEffect is Start

import React, { useState, useEffect } from 'react'
export const UseEff = () => {
    const [btn, setBtn] = useState(0);
    useEffect(() => {
        if (btn >= 1) {
            document.title = `Click ${btn}`
        }else{
            document.title = 'click'
        }
    },[btn])
    const btnClick = () => {
        setBtn(btn + 1)
    }
    return (
        <>
            <div className="container m-5">
                <h1>{btn}</h1>
                <button onClick={btnClick} className="btn btn-primary">Click</button>
            </div>
        </>
    )
}
export default UseEff;

What is UseEffect CleanUP function in React

Normal Way

import React, { useEffect, useState } from 'react'
export const UseEffCleanUp = () => {
    const [windCount, setWindCount] = useState(window.screen.width)
    useEffect(()=>{
        window.addEventListener('resize', ()=>{
            setWindCount(window.innerWidth)
        })
    })
    return (
        <>
            <div className="container m-5">
                <p>The actual size of the window is</p>
                <h1>{windCount}</h1>
            </div>
        </>
    )
}
export default UseEffCleanUp;

UseEffect CleanUp Function

import React, { useEffect, useState } from 'react'
export const UseEffCleanUp = () => {
    const [windCount, setWindCount] = useState(window.screen.width)
    useEffect(() => {
        console.log('add event');
        window.addEventListener('resize', ()=>{
            setWindCount(window.innerWidth)
        })
        return () => {
            console.log('remove event');
            window.removeEventListener('resize', ()=>{
                setWindCount(window.innerWidth)
            })
        }
    })
console.log(windCount)
    return (
        <>
            <div className="container m-5">
                <p>The actual size of the window is</p>
                <h1>{windCount}</h1>
            </div>
        </>
    )
}
export default UseEffCleanUp;