useEffect and useLayoutEffect
Allows to run side effects after rendering

Syntax

1
useEffect(effectCallback, optionalArgumentList);
Copied!
Where :
  1. 1.
    effectCallback : Function that is executed one or more times according to optionalArgumentList,effectCallback can return a function that will be executed only if effectCallback is executed again or the webcomponent is unmounted.
  2. 2.
    optionalArgumentList: Array of arguments that controls the execution of effectCallback, if an argument ofoptionalArgumentList changes it will trigger that effectCallback is executed again without first cleaning the effects subscribed by the previous execution.

Example

1
const listenerClickWindow = () => {
2
const handlerClick = () => {
3
console.log("Click window!");
4
};
5
6
window.addEventListener("click", handlerClick);
7
8
const unlistenerClickWindow = () =>
9
window.removeEventListener("click", handlerClick);
10
11
return unlistenerClickWindow;
12
};
13
14
useEffect(listenerClickWindow, []);
Copied!

useLayoutEffect

useLayoutEffect replicates the logic of useEffect but with synchronous execution to the render.
Copy link
Edit on GitHub