useEffect

React

useEffectとは

Effectとは「副作用」という意味

レンダリングされたり、ある値が変更されたときに副次的に実行したいときに使う

実行タイミング

1.毎回実行する
useEffect( ()=>{
  省略
})

2.初回レンダリング後のみ実行する
useEffect( ()=>{
  省略
}, [])

3.triggerが変更される度に実行
useEffect( ()=>{
  省略
}, [trigger])

4.triger1かtrigger2が変更されたときに実行
useEffect( ()=>{
  省略
}, [trigger1, trigger2])

APIを読み込む

function App(){
  const [name, setName] = useState('masato')
  const [id, setId] = useState('tiger')
  const getRandomID = ...省略...
  
  useEffect( () => {
    fetch('https://api.github.com/users/1' + id)
      .then( res => res.json() )
      .then( data => { console.log(data)     setName(data.name) } )
      .catch( error => { console.error(error) } )
  }, [id])
  
  return (
    <div>
      <p>{id}の、GitHub上の名前は{name}です</p>
      <button onClick={getRandomID}>IDを変更</button>
    </div>
  )
}

Next.jsでuseEffectを使う場合

Next.jsのApp Routerでは全てのページをサーバーサイトでレンダリングするため、useEffectを使いたい場合はJSファイルの最初に

"use client"

を書くこと。また、Static Exportsする場合は当然、useEffectが使えない。

BACK