@tencentcloud/call-uikit-react/src/Components/hooks/useNetWorkStatus.ts

An Open-source Voice & Video Calling UI Component Based on Tencent Cloud Service.

import { useEffect, useState } from 'react';
import { NAME, StoreName, TUIStore } from '../../TUICallService';

export default function useNetWorkStatus() {
  const [
    netWorkQualityList,
    setNetWorkQualityList,
  ] = useState(TUIStore.getData(StoreName.CALL, NAME.NETWORK_STATUS));
  const handleNetWorkStatusChange = (value) => {
    setNetWorkQualityList(value);
  };

  const watchOptions = {
    [NAME.NETWORK_STATUS]: handleNetWorkStatusChange,
  };

  useEffect(() => {
    TUIStore.watch(
      StoreName.CALL,
      watchOptions,
      {
        notifyRangeWhenWatch: NAME.MYSELF,
      },
    );

    return () => {
      TUIStore.unwatch(
        StoreName.CALL,
        watchOptions,
      );
    };
  }, []);
  return netWorkQualityList;
}