useEffectは、フックの1つで、特定の事が起こった時（たとえば、ページが開かれたときや、ユーザーが何かを変更したときなど）にプログラムが処理を実行するように指示するために使います。これを**副作用**と呼びます。また、useEffectは、プログラムが覚えておくべき情報（「状態」または「state」）が変わった時にも何かを実行するように指示することができます。 ## 使い方 useEffectを使うときは、2つの引数を書きます。 ### 第一引数コールバック関数です。関数内に実行したい処理を書きます。 ### 第二引数 **依存配列**を使って、いつそれをするかを設定します。依存配列を使うと、次のような指示が出せます。 ①ページを開いた時（初回レンダリング）だけ処理を行う →`[]`を書く ②ページを開いた時または特定のstateが変わった時（再レンダリング）に処理を行う →何も書かない ③特定のstateが変わった時（再レンダリング）だけ処理を行う →`[特定のstate名]`を書く ~~~jsx useEffect(() => { // 実行したい処理 }, [依存配列]) ~~~ ## 例1 初回レンダリング時のみ実行する ~~~jsx // 最初にロードした時だけコンソール出力が行われる const Sample1 = () => { const [count, setCount] = useState(0) useEffect(() => { console.log('useEffectが実行されました') }) return (

カウント: {count}

) } ~~~ ## 例2 毎回のレンダリング時に実行する ~~~jsx // ボタンを押すたびにコンソールに出力する const Sample2 = () => { const [count, changeCount] = useState(0) useEffect(() => { document.title = `You clicked ${count} times` console.log(`毎回のレンダー時：${count}`) }) return ( <>

{count}

) } ~~~ ## 例3 特定のstateが変わった時に実行する ~~~jsx // メッセージのstateが変わった時のみコンソールに出力する const Sample3 = () => { const [count, setCount] = useState(0) const [message, setMessage] = useState('') useEffect(() => { console.log('useEffectが実行されました') }, [message]) return (

カウント: {count}

Learn useEffect

Count: {count}

Message: {message}

React 入門 学習結果

React 入門学習結果