Reactガイドを読んでいくその253

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

クリーンアップを有する副作用

外部のデータソースへの購読をセットアップしたい場合、メモリリークが発生しないようにクリーンアップが必要。
メモリリークを避けるためにクリーンアップが必要なので、クリーンアップを有する物を使用する。

フックを使った例

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は具体的には副作用のクリーンアップをコンポーネントがアンマウントする際に実行する。
副作用は毎回レンダーの時に実行され、その後クリーンアップを行う。

今日はここまで。