これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
副作用フックの利用法
副作用フックによって関数コンポーネント内で副作用を実行することができるようになる。
サンプル
import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
このスニペットは前回の例に基づいて作っている。
データ取得、講読の設定、Reactコンポーネント内のDOMの手動での変更などは副作用に該当する。
副作用(side-effect)またはeffectと呼ぶことに慣れているかどうかはともかく、こういった機能を実装するのは
経験済だったりすることが多い。
Reactコンポーネントにおける副作用には2種類ある。
クリーンアップコードを必要としない
クリーンアップコードを必要とする
それぞれについては次回から見ていく。
今日はここまで。