Polling in React

App.js

import React, { useState, useEffect } from 'react';
import './App.css';
import { Route, Switch } from 'react-router';
import { Container, Breadcrumb, BreadcrumbItem, Button } from 'reactstrap';
import useFetch from './util/useFetch';
import { Home } from './routes/Home';
import { Buyer } from './routes/Buyer';
import { Seller } from './routes/Seller';
import { Demo } from './routes/Demo';
import { Scoreboard } from './components/Scoreboard';

const { get } = useFetch();

const pollIntervalInSeconds = 3;

const App = () => {

  const [auction, setAuction] = useState({
    active: false,
    startDateTime: '',
    duration: 0,
    remainingDuration: 0,
    averageMarketPrice: 0,
    totalMarketCapacity: 0,
    buyer: null,
    sellers : []
  });

  const [isPolling, setPolling] = useState(true);
  const [isLoading, setLoading] = useState(false);

  const updateAuctionData = async () => {

    let updatedAuction = {};

    if (isPolling === false || isLoading === true) {
      console.log('Skip poll cycle...');
      return;
    }

    setLoading(isLoading);
    
    try {
      var response = await get('auction/');
      setAuction(response.body);
    } catch (ex) {
      throw ex;
    }
    finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    updateAuctionData();
    const interval = setInterval(updateAuctionData, pollIntervalInSeconds * 1000);
    return () => clearInterval(interval);
  }, [isPolling, isLoading]);

  return (
    <Container>
      <h1>
        Hivemind Reinsurance <span role="img" aria-label="Bee">🐝</span>
      <section>
        <Switch>
          <Route exact path="/" render={(props) => <Home {...props} auction={auction} />} />
          <Route path="/buyer" render={(props) => <Buyer {...props} buyer={auction.buyer} seller={auction.seller} />} />
          <Route exact path="/seller/:id" render={(props) => <Seller {...props} auction={auction} />} />
          <Route path="/demo" render={(props) => ( 
            <Demo>
              <Buyer {...props} auction={auction} />
            </Demo>
          )} />
        </Switch>
      </section>
    </Container>
  );
};

App.displayName = 'Hivemind Reinsurance Application';

export default App;

Buyer.js

import React from 'react';
import { Input, Badge, Table } from 'reactstrap';

export const Buyer = ({auction}) => {
  const {sellers, buyer} = auction;

// If I don't have this, it will blow up because of null references.  
if (auction.buyer == null) return null;

  return (
    <>
      <h2>Buyer: <Badge>{buyer.name}</Badge></h2>

      other stuff.....
    </>
  );
};