Как структурировать код утилиты React Preload

В настоящее время я изучаю React после многих лет работы с ванильным JS и jQuery.

Мне нужно предварительно загрузить некоторые веб-шрифты, а в будущем, возможно, изображения, аудио, видео и т. д.… Действительно что угодно. Этот вопрос может относиться к любому количеству утилит, которые необходимо выполнить, прежде чем что-то отобразится на экране.

Я подошел к этому так же, как и всегда - загружаю материал, затем устанавливаю переменную, которую я могу использовать для определения того, какой контент отображается (в этом случае переменная устанавливается в хранилище Redux).

Мой код preload.js выглядит следующим образом:

import WebFont from 'webfontloader';
import store from 'js/store/store';
WebFont.load({
  custom: {
    families: ['MyCustomFont']
  },
  active: function(){
    store.dispatch.data.setPreloadedFonts();
  }
});

Мой код приложения index.js можно упростить как:

import preload from './preload';
class App extends React.Component {
  render() {
    if (
      this.props.preloadedFonts &&
      this.props.ajaxDataLoaded &&
      this.props.miscOtherStuffDone
    ){
      return (
        <div>
          <Switch>
            // My app routes here…
          </Switch>
        </div>
      )
    }else{
      return (
        <div className = "preloader"></div>
      )
    }
  }
}

Все это работает отлично, просто и требует очень мало кода.

Однако React предупреждает меня: preload определен, но никогда не используется - no-unused-vars

Я понимаю, почему это происходит - «предварительная загрузка» должна быть импортирована, но не используется активно внутри компонента. Читая вокруг и глядя на некоторые другие плагины, я предполагаю, что это не «способ React», и что мой предварительный загрузчик должен быть в форме компонента, который обертывает мое приложение - например, <Preloader></Preloader>

Есть ли какой-то особый подход к чему-то вроде этого? Кажется, что любой альтернативный подход, вероятно, будет более сложным и менее гибким.