Skip to main content


When to use?

When it becomes difficult to control and extend the initializing logic of the application (global styles/initialization of external libraries/routing/SSR)



There are usually placed:

  • initialization of processes and other background logic
  • initialization of providers, wrappers
  • connecting global application styles

The methodology does not yet regulate the content of this layer in any way, so it depends on the specific project


Initializing the router

export const withRouter = (component: Component) => () => (
<Suspense fallback={<Spin overlay />}>
<QueryParamProvider ReactRouterRoute={Route}>

Initializing external libraries

export const withAntd = (component: Component) => () => (
<ConfigProvider getPopupContainer={...}>
const client = new ApolloClient({ ... });

export const withApollo = (component: Component) => () => (
<ApolloProvider client={client}>

Enabling initialization

Only one of the methods is shown here, if you use HOC for providers and logic initialization

import compose from "compose-function";
import { withRouter } from "./with-router";
import { withAntd } from "./with-antd";

// 1. The compose library is often exported from some dependencies that you already use
// e.g.: `import { compose } from "redux"`
// 2. It is worth considering the order of HOCs connection
// e.g.: withHOC2 cannot be started until there is a wrapper withHOC1, etc.
export const withProviders = compose(withRouter, withAntd,...);
import { withProviders } from "./providers";

const App = () => { ... }

export default withProviders(App);