useEffect is a react hook. The Effect Hook lets you perform side effects in function components. Network requests, manual DOM mutations, and logging are common examples of effects.

useEffect is widely used for the asynchronous tasks in react. we use useEffect because it does not block the UI while the asynchronous task is executed. And also it is easy for the developer to read that this task was performed after the normal control flow

There are 3 important parts of the useEffect function

1. Side Effect

2. cleanup function

3. statesArray

lets understand them one by one

1. Side Effect

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;

  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

the useEffect function runs after every render and updates the value of count on title after it is updated on the DOM

cleanup function

The cleanup function is the function that runs after the component is unmounted and it is given by return in the useEffect function.

why to use cleanup function ?

we use the cleanup function because it helps in resolving the memory leaks that will be caused if we don't use the cleanup function. the cleanup function will be invoked every time before the component is destroyed and also when the next schedule effect has to be run.

useEffect(() => {
    const interval = setInterval(function () {
      setCount((prev) => prev + 1);
    }, 1000);
    // return optional function for cleanup
    // in this case acts like componentWillUnmount
    return () => clearInterval(interval);
}, []);

In the above code, the setInterval will keep running even after the component is unmounted causing the memory leak and for this, we have a return which is a useEffect cleanup function which clears the interval after the component is unmounted

dependency Array

It is the second parameter of the useEffect and it defines when will useEffect run lets us understand this

1. when no dependency array is passed ()

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;

  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

In this example, useEffect will run after every render which can cause performance problems so we should not skip adding the dependency array

2. Empty array is passed ([])

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;

  }, []);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

in this case, component will run only after the first render and not after that this case is best for the async network calls that we have to do only at the start

3 . array with variable is passed ([variable1 , variable2])

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;

  }, []);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

In this case, the useEffect will only run the when the count variable is changed and not on every render Hope you liked the Blog. Do comment your thoughts