副作用フックの利用法を読む
副作用フック＝ useEffect のこと
クリックの回数を含んだカスタムメッセージをドキュメントのタイトルにセットしている
code:js
import React, { useState, useEffect } from 'react';
function Example() {
// 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 の手動での変更
useEffect フックは以下のまとまり
componentDidMount
componentDidUpdate
componentWillUnmount
フックを使った例
useEffect を使うことでレンダー直後になにかの処理をしたいことを React に伝えられる
useEffect をコンポーネント内に記述することで、副作用内から state である count や任意の props にアクセスできるようになる
フックは JS のクロージャを利用している
useEffect は毎回のレンダー後に呼ばれる
クリーンアップが必要な例
その場合は関数を返す
code:js
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});