useEffect vs useLayoutEffect

Tony·2021년 12월 1일
0

react

목록 보기
42/82

useEffect()

  • 실행 순서
    • 컴포넌트 렌더링 - 화면 업데이트 - useEffect실행
  • 비동기적으로 실행
  • DOM과 인터렉션이 없는 경우에 사용(대부분 경우)

useLayoutEffect()

  • 실행 순서
    • 컴포넌트 렌더링 - useLayoutEffect 실행 - 화면 업데이트
  • 동기적으로 실행됨
  • 렌더링 직후 DOM요소의 값을 읽을 때 유용함(scroll position등)
  • DOM을 변경(mutate)할 경우에 사용

useEffect를 사용할 경우 effect가 실행됨과 동시에 DOM에 mutation이 일어날 경우 flickering이 발생할 수 있다. 이러한 경우 useLayoutEffect를 사용해서 flickering을 막을 수 있다.

결국 두 hook의 가장 큰 차이점은 실행 시점이다.

참고

profile
움직이는 만큼 행복해진다

0개의 댓글