most common cases how useEffect implementation:
- fetch data from API,
- directly updating the DOM,
- use timers and real-time data displays (such as BTC current price)
- validating input field
- trigger animation on new array value
-
// 1- EVERY RERENDER
useEffect( () => {
console.log("It runs everytime this component rerenders")
});
// 2- ON MOUNT
useEffect( () => {
console.log("It Only runs once (When the component gets mounted)")
}, []);
// 3- DEPENDING ON CONDITION
useEffect( () => {
console.log("It runs everytime the condition is changed")
}, [condition]); //basically the dependency array determines when the rerender happens
// 4- DEPENDING ON CONDITION, BUT WITH "clean up"
useEffect( () => {
console.log("It runs everytime my condition is changed")
return () => {
console.log("Use this return as a 'clean up tool' (it runs before the actual code)")
}
}, [condition]);