useEffect, useLayoutEffect and useInsertionEffect
Allows to run side effects after rendering
useEffect(effectCallback, optionalArgumentList);
Where :
- 1.
effectCallback
: Function that is executed one or more times according tooptionalArgumentList
,effectCallback
can return a function that will be executed only ifeffectCallback
is executed again or the webcomponent is unmounted. - 2.
optionalArgumentList
: Array of arguments that controls the execution ofeffectCallback
, if an argument ofoptionalArgumentList
changes it will trigger thateffectCallback
is executed again without first cleaning the effects subscribed by the previous execution.
const listenerClickWindow = () => {
const handlerClick = () => {
console.log("Click window!");
};
window.addEventListener("click", handlerClick);
const unlistenerClickWindow = () =>
window.removeEventListener("click", handlerClick);
return unlistenerClickWindow;
};
useEffect(listenerClickWindow, []);
useLayoutEffect replicates the logic of useEffect but with synchronous execution after rendering.
useLayoutEffect replicates the logic of useEffect but with synchronous execution before rendering.
Last modified 2mo ago