To understand useEffect hook we sholud know side effects and pure functions in Java-script becuase useEffect hook is derived or implemented by using those two concepts of vanilla java script

pure functions

function which implements the side effect is not a pure function and all other functions are pure
pure functions always returns the same output for same given input at any time

what are side effects:
- 1.Function interaction with variables which are existing outside of its boundary
- 2.Making an network call
- 3.interacting with browser api to use document or window
- 4.Using setTImeOut or SetInterval Functions(they are part of browser)

Side effects are not predictable becuase they are not in control of function boundary hence function that is handling with side effects are not predictable.

So to handle these knid of side effects in React we have useEffect hook

UseEffect: If component wants perform any side effect that should go into the effect(callback) of useEffect

One Key thing is useEffect runs after every render so that what ever code is there inside effect function will not slows down the rendering part.

syntax

function Effect(){

useEffect(()=>{
})

return <>
<h1/>Hello world</h1>

</>
}

useEffect will takes two parameters one is callback second one is dependency array this is optional to controll when sholud effect run

ways to controll the effect(callback function)

1. without dependency array:

If we aviod to give second argument to the useEffect then effect function will calls after every render

useEffect(() => {
  // Side Effect
});

2. Empty Array:

If we pass empty array then after intial render only effection will runs (only once),irrespective of renders

useEffect(() => {
  // Side Effect
},[]);

3. state variable

If there is change in given state variable then after every change effect function will runs
- after setting state if there is no change in state variable value then effect function won't run what i mean is if variable value is true then again if set the state value to true then at that time effect function won't run becuase variable value is not changing event after setting the state

useEffect(() => {
  // Side Effect
}[state]);

4. Passing Props

we will get props for component we can pass that as dependency to controll the effect
```
useEffect(() => {
// Side Effect
},[props]);
```

5. More than one dependency

we can controll with more than one dependency by passing state variable and props at the same time or with different state variable
- if there is change in any of the dependency then effect will runs
```
useEffect(() => {
// Side Effect
},[state,props]);
```

What is cleanup Function in useEffect

some times we need to clear created effects, not all effects but some effects like setInterval, e.t.c

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    let interval = setInterval(() => setTime(1), 1000); 
  }, []);
}

In the above example we created effect we should clear this effect ,problem here is say our component is destroyed or unmounted(we moved to other route where this component is not rendered so its state will be destroyed) but still created effect will tries to updated the state time which is no longer exists,This error is called Memory Leak So to aviod these kind of situations we should perform clean up activities so that memory leaks won't happen

Cleansup- created effects:

If we return the function from useEffect then that function is called clean up function, it will be called during component unmounting stage. so what ever the effects we should clean those needs to be placed inside clean up function

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    let interval = setInterval(() => setTime(1), 1000); 

    return () => {
      // setInterval cleared when component unmounts
      clearInterval(interval);
    }
  }, []);
}

Balaji Nayana's Blog