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,effectCallbackcan return a function that will be executed only ifeffectCallbackis executed again or the webcomponent is unmounted. - 2.
optionalArgumentList: Array of arguments that controls the execution ofeffectCallback, if an argument ofoptionalArgumentListchanges it will trigger thateffectCallbackis 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