How to use the react-use/lib/useAsync function in react-use

function Metrics({ theme, sparkline, itemSize, size }) {
  const state = useAsync(sparkline ? fetchBoth : fetchLatest);
  const [updates, setUpdates] = useState(null);
  const [liveUpdate, setLiveUpdate] = useLiveUpdate();
  const [animation, setAnimation] = useBoolean(false);
  const [token] = useTokenInfo();

  // Pull
  useInterval(
    async () => {
      try {
        let res = null;
        if (sparkline) {
          res = await fetchBoth();
        } else {
          res = await fetchLatest();
        }
        setUpdates(res);

function PaginatedList({ args, pageSize, pageLink, dataKey, dataLoaderFn, dataRenderFn }) {
  const [cursor, setCursor] = useState(null);

  // eslint-disable-next-line
  const fetchList = async (args, size, cur = null) => {
    const params = { ...args, paging: { size: size || 10 } };
    if (cur) {
      params.paging.cursor = cur;
    }

    const res = await dataLoaderFn(params);

    return res;
  };

  const state = useAsync(async () => fetchList(args, pageSize, cursor), [args, pageSize, cursor]);

  if (state.error) {
    console.error(state.error);
  }

  if (state.loading) {
    return (
      
        
      
    );
  }

  if (state.error) {
    return (

export function useStartupInfo() {
  const [, setTokenInfo] = useTokenInfo();
  const [, setNodeInfo] = useNodeInfo();

  const state = useAsync(fetchInfo);
  if (state.value) {
    // HACK: we must add a timeout here
    setTimeout(() => {
      setTokenInfo(state.value.token);
      setNodeInfo(state.value.node);
    }, 0);
  }

  useInterval(async () => {
    try {
      const result = await fetchInfo();
      localStorage.setItem(`${process.env.REACT_APP_NAME}.token`, JSON.stringify(result.token));
      localStorage.setItem(`${process.env.REACT_APP_NAME}.node`, JSON.stringify(result.node));
    } catch (err) {
      // Do nothing
    }

export default function StatusSection() {
  const state = useAsync(fetchStatus);
  const [selected, setSelected] = useState(null);

  if (state.loading) {
    return (

export default function ProducerGlobe() {
  const state = useAsync(fetchPeers);
  const { width } = useWindowSize();
  const [theme] = useThemeMode();
  const [liveUpdate] = useLiveUpdate();
  const [activeMarkerId, setActiveMarker] = useState(null);

  useInterval(
    async () => {
      if (state.value) {
        const proposer = await fetchLatestProposer();
        setActiveMarker(proposer);
      }
    },
    liveUpdate ? 5000 : null
  );

  if (state.loading) {

export default function TopAccounts({ sparkline }) {
  const state = useAsync(fetchTopAccounts);
  const [token] = useTokenInfo();

  if (state.loading) {
    return ;
  }

  if (state.error) {
    return <p>{state.error.message}</p>;
  }

  return (
    
        
          Rank
          Username<table>
      </table>

export default function AccountActivity({ data, delayMS }) {
  const state = useAsync(async () => formatActivity(data, delayMS), [data, delayMS]);

  if (state.loading) {
    return ;
  }

  if (state.error) {
    return <p>{state.error.message}</p>;
  }

  return (
    
      
    
  );
}

export default function PaymentPage() {
  const state = useAsync(fetchStatus);
  const [open, toggle] = useToggle(false);

  if (state.loading) {
    return (
      
        <main>
          
        </main>
      
    );
  }

  if (state.error) {
    return (
      
        <main>{state.error.message}</main>

export default function TopValidators({ sparkline }) {
  const state = useAsync(fetchTopValidators);
  const [currentPage, setCurrentPage] = useState(1);

  if (state.loading) {
    return ;
  }

  if (state.error) {
    return <p>{state.error.message}</p>;
  }

  const renderPagination = () =&gt; {
    if (state.value.length &gt; pageSize) {
      return (

export default function useSession() {
  const state = useAsync(fetchSession);
  return state;
}