React.lazy? But what if you don't have a component?

This code splitting, honestly, is already a bit tired. We all walk and walk in a circle, and this is the main problem.

Code splitting started as a separation at the Module level, and ended as a separation at the Component level.

And the problem here is only in the head - React.lazy is good, but the import has not gone anywhere ... So why code splitting only about the components?

React.lazy, React-Loadable, Loadable-Components, Imported-component - there are many libraries in the world that wrap module loading into some sugar, solely to handle component loading and show it when ready, a little more user-friendly. The minimum code for "async-loader".
')

const loadable = (loaderFunction) => class AsyncComponent extends React.Component { state = { ResultComponent: null, error: false, }; componentWillMount() { loaderFunction .then(result => this.setState({ ResultComponent: result.default || result})) // "es6" default export .catch(() => this.setState({ error: true }); } render() { const { error, ResultComponent } = this.state; // Display loaded component return ResultComponent ? <ResultComponent {...this.props}/> : (error ? <ErrorComponent /> : <LoadingComponent />) } } 

Suspense and React.lazy are just another way to work with the state. Nothing more.

But what if you do not have a component?

There seems to be no problem with this - import ("someStuff"). Then ('go-on') . But here again questions about how to correctly place it in the lifecycle of React begin, what to do there is promis, after the death of the component, and so on. And all in the head some components.

I conducted a mini-survey - NO ONE uses the most ancient version of code splitting. I do not know how to eat it in modern conditions. And in general, everything is bad.

At the same time there is a solution, and again in 4 lines - renderProps

Everything is very simple - despite the fact that code splitting is not a Component, but a Module, a Component will be the place of the operation.

 const loadableModule = (loaderFunction) => class AsyncComponent extends React.Component { state = { ResultComponent: null, error: false, }; componentWillMount() { loaderFunction .then(result => this.setState({ module: result.default || result})) // "es6" default export .catch(() => this.setState({ error: true }); } render() { const { error, module } = this.state; return module // pass it as a render prop! ? this.props.children(module) // pass it as a render prop! : (error ? <ErrorComponent /> : <LoadingComponent />) } } 

The same pattern, just turned in the direction of loading the code and “providing” this code as renderProps.

Works out of the box:

• loadable-components ( loadable.lib )
  
  

   import loadable from '@loadable/component' const Moment = loadable.lib(() => import('moment')) function FromNow({ date }) { return ( <div> <Moment fallback={date.toLocaleDateString()}> {({ default: moment }) => moment(date).fromNow()} </Moment> </div> ) } 

• react-lodable ( react-loadable-library )
  
  

   import {importedLibraryDefault} from 'react-loadable-library'; const Moment = importedLibraryDefault( () => import('momentjs')); <Moment> { (momentjs) => <span> {momentjs(date).format(FORMAT)}</span> } </Moment> 

• react-imported-component ( react-imported-library )
  
  

   //    react-loadable-library,   Suspense 

Cheap and very angry. It allowed me to cut an additional 20%. But, most importantly, it allowed a very declarative configuration of code-splitting, which will load only what is needed and when it is necessary.

Now it's your turn,% username%.

And who will rewrite it on hooks?