유, useEffect 짱! 처음으로 움직이지 마라!

TL;DR

좋은 쇼 ...... 좋은 쇼 ......
useEffect 편리하네요.
state의 변화를 감시해, 그 state의 변화에 ​​수반해야 할 처리의 흐름을 일원 관리할 수 있습니다.

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

function Counter(props) {
  const [count, setCount] = useState(0)
  const [lastUpdatedAt, setLastUpdatedAt] = useState(null)

  useEffect(() => {// 『count』 が更新された際に、それに伴い必ず実行される
    setLastUpdatedAt(new Date().toString())
  }, [count]) 

  return (
    <div>
      <p>カウント {count} 回目</p>

      {/* 変な要件の機能だなぁ…🤔 */}
      <p>🎉最終カウントアップ日時🎉 {lastUpdatedAt || ''} </p>

      <p>
        <button onClick={() => setCount(count + 1)}>カウントアップ</button>
      </p>
    </div>
  )
}

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

흥미로운 곳

(위의 예와 같이) 아무것도 생각하지 않고 그대로 사용하면, 대상의 state가 변경되고 있는지 아닌지에 관계없이, 첫회 렌더시 「에도」 반드시 움직여 버린다.



카운트 아직 1회도 하지 않았는데 「마지막 카운트 업 일시」나와서의 이상한 다르르콧!?(시끄럽네요···)

카케츠

useRef 을 사용한다.

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

function Counter(props) {
  const [count, setCount] = useState(0)
  const [lastUpdatedAt, setLastUpdatedAt] = useState(null)

  const isFirstRender = useRef(false)

  useEffect(() => { // このeffectは初回レンダー時のみ呼ばれるeffect
    isFirstRender.current = true
  }, [])

  useEffect(() => {// 『count』 が更新された場合『と』初回レンダー時に動くeffect
    if(isFirstRender.current) { // 初回レンダー判定
      isFirstRender.current = false // もう初回レンダーじゃないよ代入
    } else {
      setLastUpdatedAt(new Date().toString())      
    }
  }, [count]) 

  return (
    <div>
      <p>カウント {count} 回目</p>

      <p>🎉最終カウントアップ日時🎉 {lastUpdatedAt || ''} </p>

      <p>
        <button onClick={() => setCount(count + 1)}>カウントアップ</button>
      </p>
    </div>
  )
}

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

과거의 클래스 컴포넌트에서 말하는 곳의 "componentDidUpdate"와 비슷한 기능을 기대할 수 있습니다.

케츠론

결과 오라이! 끝 역시 React는 즐겁다. 이상.