こんにちは。
Reactの副作用フックは、React 16.8 で追加された新機能です。
この useEffect の理解に少し困ったのでその辺りの経験談を交えて紹介したいと思います。
state などの React の機能を、クラスを書かずに使えるようになりました。
useEffectとは
useEffect に渡された関数は、レンダーの結果が画面に反映された後に動作します。
つまり、レンダー後に発火させたいイベントを記述する場所と考えることができます。
また、チュートリアルによるとこれまでクラスコンポーネントで使っていたライフサイクルの下記の3つ
- componentDidMount
- componentDidUpdate
- componentWillUnmount
これらをまとめたものが useEffect となります。
useEffect は、状態変数の代入やDOMの書き換え、API通信などの副作用の処理を関数コンポーネントで実装できるようにしたものです。
useEffectのサンプルコード
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `${count}回クリックしました`;
});
return (
<div>
<p>{count}回クリックしました</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
上の例は「React ステートフック useState の使い方」で紹介したコードに useEffect を追加したコードになっています。
onClick={() => setCount(count + 1)} でクリックイベント後、状態変数 count が変化し、{count}回クリックしました の {count} が再度レンダーされています。
このレンダーされたタイミングで useEffect が発火するというロジックになっています。
この例ではクリックの度に document.title が更新されるということになります。
CDNからReactをインポートしている場合
useEffect のインポート方法が次のようになります。
const { useState, useEffect } = React
WordPressで利用する場合
wp.element からインポートします。
const { useState, useEffect } = wp.element
クラスコンポーネントのサンプルコード
次の例はクラスコンポーネントで実装した例です。
class App extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
componentDidMount() {
document.title = `${this.state.count}回クリックしました`;
}
componentDidUpdate() {
document.title = `${this.state.count}回クリックしました`;
}
render() {
return (
<div>
<p>{this.state.count}回クリックしました</p>
<button onClick={() => this.setState({count: this.state.count + 1})}>
Click me
</button>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
クラスコンポーネントの場合
副作用はReactがDOMを更新したあとに発火するようにするため、componentDidMount と componentDidUpdate を実装します。
DOMに変更がかかったタイミングで document.title を更新しています。
コメント
[…] React 副作用フック useEffect の使い方(実演コード付き) […]