What are effects or side effects?/

The main job of react is to bring something onto the screen, to manage state and props, to react to user input and change the UI based on user input or changes in UI based on events. Side effects are everything else happening in the application other than this like sending HTTP requests, handling errors, and fetching data from the local storage, listening to every keystroke(action in response to another action). Handling these types of sideEffects is not possible directly in the component function itself because it creates bugs, and infinite loops therefore a special type of react hook is introduced called useEffect() hook.

useEffect () hook:

To use useEffect hook first of all we had to import it

import React,{useEffect} from 'react'

Syntax

useEffect()=(()=>{},[])

useEffect hook() takes two arguments the first argument is an anonymous function and the second argument is an array of dependencies. Function in useEffect does not re-executes on every re-rendering of the function component. It only re-executes if any of the array dependency change which is the second argument of useEffect hook.useEffect() returns undefined.

Dependencies

Cases

Case 1: Without a second argument

useEffect=(()=>{})

This is the valid syntax .in this case the function in useEffect() re-executes on every re-evaluation of the function component.

Case 2: Array with no dependencies(empty array)

useEffect=(()=>{},[])

In this case, the function in useEffect() executes only once when the page renders for the first time.

Case 1: Array with few dependencies

useEffect=(()=>{dep1,dep2,dep3})

In this case, the function executes for the first time and then it will run after the component re-renders but only if the value of any of the dependencies changes. If the component re-renders but the value of any of the dependencies do not change then useEffect won’t run.

What to Add and what to not Add as a dependency:

Don't add variables or functions as dependencies that you have defined outside the function component.
Don't add a state updating function as a dependency (because these never change).
Don't add built-in APIs and functions(because these never change).

Cleanup function

useEffect(()=>{
return ()=>{}
},[])

Cleanup function (return ()=>{}) provided by react hook. It runs whenever any dependency change but runs before the function. It does render when the function component renders for the first time.

Why cleanup function?

Saves the application from unwanted behaviors like memory leaks, and sending too many HTTP requests by cleaning up effects.
Optimizes application performance.

Example

import { useState,useEffect } from 'react'

import './App.css'

function App() {
 const [heading,setHeading]=useState('heading1')
useEffect(()=>{
console.log('useeffect')
return ()=>{console.log('cleanup function')}

},[heading])
  return (
    <>
<button onClick={()=>{setHeading('heading1')}}>heading1</button>
<button onClick={()=>{setHeading('heading2')}}>heading2</button>
<button onClick={()=>{setHeading('heading3')}}>heading3</button>
<h1>{heading}</h1>
    </>
  )
}

Rumaisa's blog