[BFE.dev] useEffect

useEffect

// This is a React Quiz from BFE.dev 

import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'

function App() {
  const [state, setState] = useState(0)
  console.log(state)

  useEffect(() => {
    setState(state => state + 1)
  }, [])

  useEffect(() => {
    console.log(state)
    setTimeout(() => {
      console.log(state)
    }, 100)
  }, [])

  return null
}

ReactDOM.render(<App/>, document.getElementById('root'))

출력 결과

0
0
1
0

풀이 과정

1. 초기 렌더링

• 0 출력: App이 실행되고 useState에 의해 state는 0이 됩니다.

• 0 출력: 렌더링 직후 첫번째 useEffect가 실행되어 state를 업데이트를 예약하고 두번째 useEffect로 0인 state를 호출합니다.

  • setTimeout 실행: Web API에게 100ms 뒤에 함수를 실행해달라고 넘깁니다. (이때 state: 0)

2. 상태 업데이트 후 재렌더링

• 1 출력: setState에 의해 state는 1로 출력됩니다.

• 0 출력: Web API가 setTimeout의 콜백을 taskQueue에 넣고 엔진이 실행합니다.

  ✨ V8이 재렌더링을 끝내는 속도가 Web API가 100ms를 세고 기다리는 속도보다 압도적으로 빠르기 때문에, 화면 업데이트(재렌더링)가 먼저 일어나는 것입니다.

추천 영상

https://www.youtube.com/watch?v=8aGhZQkoFbQ&t=624s