【React】 UseEffect を使用して、コンポーネントが呼ばれた最初だけ実行する処理を実装

5066 ワード
useEffect コンポーネント 実行 React 最初 React テキストリンク

今回のテスト
ボタンをクリックすると、コンポーネントが呼ばれる最初、ある処理を実行する。

■以下前提のコード

sample.js
import React,{useState,useEffect} from 'react'
const sample= () => {
}
export default sample

■以下ボタンを実装

sample.js
import React,{useState,useEffect} from 'react'

const sample = () => {
    return (
        <div>
            <button onClick={()=> setCnt(prevCnt=>prevCnt+1)}>Click Count {cnt}</button>          
        </div>
    )
}
export default sample

■以下stateとstateを更新する関数(setCnt)を実装。※constの最後の,[]が一度だけ呼び出す肝。

sample.js
import React,{useState,useEffect} from 'react'

const sample = () => {
    const [cnt,setCnt] = useState(0)
    useEffect(()=> {
        console.log("useEffect invoked")
    },[])
    return (
        <div>
            <button onClick={()=> setCnt(prevCnt=>prevCnt+1)}>Click Count {cnt}</button>          
        </div>
    )
}
export default sample

■結果
ブラウザを開くとブラウザのコンソールに「useEffect invoked」と1度だけ表示される。ボタンをクリックしても、それ以降よばれない。