Takes at least 2 refreshes to load a page

Probably your problem is that some of the resources are cached. If you reload once the browser will only reload the main url. If you reload twice other resources will be refreshed. So it can be some strange behaviour derived from this.

There are some tricks, for example if you can change the url of the js file, change it from http://yoursite/folder/file.js to http://yoursite/folder/file.js?_=TIMESTAMP where TIMESTAMP is a timestamp, got for example from new Date().getTime() on js or time() on php (every language has a way for getting a timestamp). That _ parameter will invalidate the cache. If this works there are more elegant ways to tell the browser to handle caches according to your needs.

Service Workers

If you're using create-react-app, the problem is that there is a service worker that is likely caching the page for offline use. Service workers were enabled by default until CRA v2.0 (which is different versioning from react-scripts). It can take a few reloads to get the fresh content because the service worker, which is persisting in the browser between reloads, is what is actually hitting your hosting service to look for new content. By default, it always loads instantly from cache, until it has a chance to hit the server to check for new content. By default, the browser's console will output once you've been on a stale web page for a few seconds with New content available! Please reload.. The next refresh pulls the new content into the browser's cache.

Disable on a Specific Browser (locally)

If you just want to turn it off for development in Chrome, once you have your website loaded, you can go into the dev tools>Application>Service Workers. Once you're there, there are several checkboxes for the service worker for that website. You can check Update on reload and Bypass for network.

Disable Globally

However, if you want to permanently disable service workers, you have to unregister them first from all existing registered users. If you just remove the file called service-worker.js, it will not unregister it for users who have already accessed your site, which is problematic. In order to remove the service worker from clients who have already accessed your site, you'll have to unregister it. In your index.js file at the root of the src folder, you need to change this

import registerServiceWorker from './registerServiceWorker';
registerServiceWorker();

to

import { unregister } from './registerServiceWorker';
unregister();

What you are doing is preventing it from further registering service workers (by removing the registerServiceWorker function) and unregistering any existing service workers by calling the unregister function. The service worker might be on any number of browsers, so it's best to unregister, instead of only removing the registerServiceWorker function.

You can read more about service workers on the create-react-app docs site. Here's a link to the github issue in which the authors of CRA explain how to disable the service worker.