Reactガイドを読んでいくその251
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
クリーンアップを必要としない副作用
ReactがDOMを更新したあとで追加のコードを実行したいという場合があるので例を見ていく。
フックを使った例
import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
useEffectはレンダー後に何か処理をすることをReactに知らせる。
Reactは渡された関数を覚えていて、それを実行するようになっている。
useEffectがコンポーネント内で呼ばれるのは、useEffectを記述することで副作用ないからstatemであるcountにアクセスできるようになる。
useEffectは毎回レンダーの後に呼ばれる。
毎回呼ばれるのが嫌な場合どうするんだろう....。
明日はクリーンアップを有する副作用をみていく。
今日はここまで。