How to do skipping effects (empty array dependency) in useEffect(React)

In this article,we are going to make a program which does the skipping effect in useEffect,we have to pass useEffect an empty array [].Therefore,the effect function will be only on mount. its works similar to componentDidMount if we passed the empty array.without an Array dependency,the effect function will be run after every single render.

useEffect with empty Array file is displayed below:

1import "./styles.css";
2import React ,{useEffect,useState} from "react"
3
4export default function WithEmptyArray() {
5  const[change,setChangeValue]=useState("")
6 const [state,setState]=useState("")
7 useEffect(() => {
8   console.log("i m invoked ")
9   setState(prevState=>[...prevState,'invoked successfully'])
10}, [])
11const handleChange=()=>{
12  console.log("fucntion invoke")
13  let a=1;
14  setChangeValue(a++)
15
16}
17 return (
18    <>
19    <button onClick={handleChange}>Click me to test useEffect</button>
20
21     </>
22  );
23}

In second component , we are going to make a code which will use ueseEffect without empty array ,In this case its behaves differently.

1import "./styles.css";
2import React ,{useEffect,useState} from "react"
3
4export default function WithoutEmptyArray() {
5  const[change,setChangeValue]=useState("")
6 const [state,setState]=useState("")
7 useEffect(() => {
8   console.log("i m useeffect ")
9   setState(prevState=>[...prevState,'invoked successfully'])
10})
11const handleChange=()=>{
12  console.log("fucntion invoke")
13  let a=1;
14  setChangeValue(a++)
15
16}
17 return (
18    <>
19    <button onClick={handleChange}>Click me to test useEffect without empty array </button>
20
21     </>
22  );
23}

App.js file is displayed below

1import "./styles.css";
2import WithEmptyArray from "./WithEmptyArray";
3import WithoutEmptyArray from "./withoutEmptyArray";
4
5import { useState } from "react";
6export default function App() {
7  const [state, setState] = useState({
8    EmptyArr: false,
9    WithoutEmptyArr: false
10  });
11
12  const handleChange = (e) => {
13    const { name, value } = e.target;
14    setState({
15      ...state,
16      [name]: true
17    });
18    console.log("true", state.EmptyArr);
19  };
20
21  return (
22    <>
23      <button name="EmptyArr" onClick={handleChange}>
24        Click to useEffect with empty array
25      </button>
26      <br />
27      <br />
28      <button name="WithoutEmptyArr" onClick={handleChange}>
29        Click to use useEffect Without Empty Array
30      </button>
31      <div>
32        {" "}
33        <h1>Hi click me </h1>:{state.EmptyArr && <WithEmptyArray />}{" "}
34      </div>
35      <div>
36        <h1>hi click me:</h1>
37        {state.WithoutEmptyArr && <WithoutEmptyArray />}{" "}
38      </div>
39    </>
40  );
41}

Here is the link of live example which we done so far:
Click here