副作用フック
FunctionalComponent中で副作用を実行するためのReact Hooks.
https://ja.reactjs.org/docs/hooks-effect.html
Reactコンポーネントの内部から外部データの取得や購読,手動によるDOM更新などの際に,他のコンポーネントに影響したりする.またレンダリング中に実行することができないことをReactは副作用と呼んでいる.
componentDidMountやcomponentDidUpdate,componentWillUnmountなどと同様の目的で利用するが,1つのAPIに統合されている.
副作用はDOMを更新した後に起こしたい.
これまではcomponentDidMountやcomponentDidUpdateに書く世界だった.
レンダリングのたびに異なる副作用関数を利用する.
useEffectの副作用関数はブラウザの画面更新をブロックしない.
計測など同期処理を行う場合はuseLayoutEffectという別のReact Hooksを利用する.
クリーンアップ
クリーンアップは毎回の更新で実行される.
パフォーマンスのため,副作用をスキップしたいことがある.
以前はprevPropsやprevStateを比較して副作用をスキップしていた.
code:before.ts
componentDidUpdate(prevProps, prevState) {
if (prevState.count !== this.state.count) {
document.title = You clicked ${this.state.count} times;
}
}
副作用フックではuseEffectの第2引数に配列で変数を渡すことで,変数がレンダリング前と後で変化していた場合にのみ副作用を適用するようになる.
code:after.ts
useEffect(() => {
document.title = You clicked ${count} times;
}, count); // Only re-run the effect if count changes.