Reactガイドを読んでいくその253
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
クリーンアップを有する副作用
外部のデータソースへの購読をセットアップしたい場合、メモリリークが発生しないようにクリーンアップが必要。
メモリリークを避けるためにクリーンアップが必要なので、クリーンアップを有する物を使用する。
フックを使った例
import React, { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); // Specify how to clean up after this effect: return function cleanup() { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; }); if (isOnline === null) { return 'Loading...'; } return isOnline ? 'Online' : 'Offline'; }
副作用内から関数を返すようにすることがクリーンアップのためのオプションの仕組みになる。
Reactは具体的には副作用のクリーンアップをコンポーネントがアンマウントする際に実行する。
副作用は毎回レンダーの時に実行され、その後クリーンアップを行う。
今日はここまで。