useEffect vs useLayoutEffect

https://pubudu2013101.medium.com/what-is-the-real-difference-between-react-useeffect-and-uselayouteffect-51723096dc19

글을 배꼈다(?)

 

 

사용방법(출처)

useEffect(() => {
  // do side effects
  return () => /* cleanup */
}, [dependancy array]);
  
useLayoutEffect(() => {
  // do side effects
  return () => /* cleanup */
}, [dependancy array]);

사용방법은 똑같다. 

 

lifecycle of useEffect

useEffect

렌더링된 요소들이 화면에 프린트된 후 비동기적(asynchronously)으로 실행된다. 

 

 

 

Lifecycle of useLayoutEffect

useLayoutEffect

렌더됐지만 화면에 프린트되지 않았을 때 실행된다. 

동기적(synchronously)으로 실행된다.

그래서 이 작업이 완료될 때까지 UI가 그려지지 않고, 성능저하를 일으킬 수 있다.

 

 

대부분의 경우에는 useEffect를 쓰지만 가끔 컴포넌트가 화면에서 깜빡거린다고 느낄 때! 

첫 painting시 다르게 렌더링 되어야 할 땐 useEffect 사용시 리렌더가 일어나서 화면이 깜빡거리기 때문에 useLayoutEffect를 쓰는 것이 좋다. 

 

 

 

 

https://pubudu2013101.medium.com/what-is-the-real-difference-between-react-useeffect-and-uselayouteffect-51723096dc19

What is the real difference between React useEffect and useLayoutEffect?

 

https://medium.com/@jnso5072/react-useeffect-%EC%99%80-uselayouteffect-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C-e1a13adf1cd5

[React] useEffect 와 useLayoutEffect 의 차이는 무엇일까?