JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/en/v3.12.0/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.12.0/css/ol.css">
<div id="map" class="map"></div>

JavaScript

var map = new ol.Map({
  target: document.getElementById('map'),
  view: new ol.View({
    center: [-8908887.277395891, 5381918.072437216],
    maxZoom: 19,
    zoom: 12
  })
});

var vector;

function reload() {
  var vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: function(extent, resolution, projection) {
      return 'http://demo.boundlessgeo.com/geoserver/wfs?service=WFS&' +
        'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
        'outputFormat=application/json&srsname=EPSG:3857&' +
        'bbox=' + extent.join(',') + ',EPSG:3857';
    },
    strategy: ol.loadingstrategy.bbox
  });
  var newLayer = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: [(Math.random() * 255) | 0, (Math.random() * 255) | 0, (Math.random() * 255) | 0, 0.8],
        width: 2
      })
    })
  });
  map.addLayer(newLayer);
  vectorSource.once('change', function() {
    console.log('remove')
    if (vector) {
      map.removeLayer(vector);
    }
    vector = newLayer;
  });
}
reload();
window.setInterval(reload, 10000);