What is useEffect in react [duplicate]

Question

I recently started learning React, and I learn the useState hook, however I'm struggling to learn the useEffect hook.

I've looked at the documentation searched it up and also watched a video about it but I still can't find out what it is.

Answer 1

I shall try to explain it in simple terms. useEffect is one of the most important hooks in react and is a way to handle life cycle of the component in which it is present.

useEffect runs on every render of the component (i.e when a state variable changes) and can also run every time a specific value changes that is mentioned in it's dependency array.

useEffect also provides a very useful cleanup function which can be used to remove any active listeners when the component changes

Here are a few examples:

1. useEffect without dependency array

useEffect(() => {
    /*the code you want to run has to be in here which will keep running again and 
    again without stopping*/
})

2. useEffect with empty dependency array

useEffect(() => {
    /*the code you want to run on every render has to be in here, the empty [] means 
    that the code will run everytime this component mounts*/
},[])

3. useEffect with state variables in dependency array

useEffect(() => {
    /*the code you want to run on every render has to be in here, the dependency
    array with state means that the code will run everytime this component mounts as
    well as when these state variables change and the value will be captured by the
    useEffect*/
},[state1,state2])

3. useEffect with state variables in dependency array and cleanup

useEffect(() => {
    /*the code you want to run on every render has to be in here, the dependency
    array with state means that the code will run everytime this component mounts as
    well as when these state variables change and the value will be captured by the
    useEffect*/


    /*cleanup is used to remove any unwanted loops, intervals, listeners when the 
    component unmounts*/
    return () => console.log("clean up");
},[state1,state2])

5. A complete example for useEffect from w3schools

import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

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

  useEffect(() => {
    let timer = setTimeout(() => {
    setCount((count) => count + 1);
  }, 1000);

  return () => clearTimeout(timer)
  }, []);

  return <h1>I've rendered {count} times!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Timer />);

If you still don't understand have a look at this

w3schools link for useEffect

react official documentation for useEffect