Change state dinamically based on the internet connectivity – React (offline/ online)

I have a React component, that holds the availability flag of internet connectivity. UI elements have to be dynamically changed according to state real-time. Also, functions behave differently with the change of flag.

My current implementation polls remote API using Axios in every second using interval and updates state accordingly. I am looking for a more granular and efficient way to do this task to remove 1 second error of state with the minimum computational cost. Considered online if and only if device has an external internet connection

current implementation :

class Container extends Component{
        this.state = {
        this.webAPI = new WebAPI() //Axios wrapper

    componentDidMount() {
        }, 1000)

        return(<ChildComponent isOnline={this.state.isOnline}/>)



Looking for a solution that capable of detecting external internet connectivity. The device can connect to a LAN which doesn’t have an external connection. So, it is considered offline. Considers online if and only if device has access to external internet resources.

Source: ReactJs