useEffect and useLayoutEffect

Search…

Allows to run side effects after rendering

Syntax
1
useEffect(effectCallback, optionalArgumentList);
Copied!
Where :
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.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.

useReducer

useMemo and useCallback

Last modified 3mo ago

Copy link

Edit on GitHub

Contents

Syntax

Example

useLayoutEffect