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
-
useEffect( () => {
console.log("It runs everytime this component rerenders")
});
useEffect( () => {
console.log("It Only runs once (When the component gets mounted)")
}, []);
useEffect( () => {
console.log("It runs everytime the condition is changed")
}, [condition]);
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]);