useEffect

001. Resources

• w3schools
• reactDev
• blog
• 

Syntax §

function callback(){
// The SIDE EFFECT
	return() =>{
		// The Cleanup of the side effect
		cleanup()
	};
}
useEffect(callback[, dependencies])

• callback is a function that contains the side-effect logic. callback is executed right after the DOM update.
• dependencies is an optional array of dependencies. useEffect() executes callback only if the dependencies have changed between renderings.

[!multi-column]

[!blank-container] The Effect part basically gives an idea about what this is ! It basically creates a side-effect when a component is mounted; but that is not the limitation of this Hook. It is capable of running with condition like:

1. Whenever the component is mounted and unmounted
2. The dependency has a changed between re rendering

[!blank-container]

Easy Explanation; §

You know those potion effect in minecraft ? Well, usually they are independent of whatever or wherever the hell the player is ! the callback is the effect of those potions, and the action of throwing/drinking the potion is dependent on;

• Mounting/Unmounting the component (Regeneration potion for fighting, Regeneration potion after fighting)
• Dependencies (If health is low, then drink them potions)
• The cleanup() function can be thought of as drinking milk to remove all effects! (But that cleanup() can technically be anything)

A side effect is any action that is independent of the output While props / states work on the output directly and the functionality of the component, useEffect releases a callback function which is can remain disconnected to the changes of component

Flowchart §

%%🖋 Edit in Excalidraw, and the dark exported image%% Source

A thing to not here is that there is another cleanup() return which is capable running when the component is unmounted !