How to use Lazy Loading support with Syncfusion components in React?
This knowledge base explains how to do Lazy Loading with Syncfusion components in React.
Lazy Loading
In the Lazy Loading technique, you can load additional payload only on demand. You can lazy load the Syncfusion components and routes in React by using Code splitting. The React will load only the needed components for a path instead of loading everything in the application. This is the main use of Code splitting. So, it reduces the initial loading time of the application.
For creating the Syncfusion components in React, refer to the following documentation.
https://ej2.syncfusion.com/react/documentation/grid/getting-started/
We have created component files for Calendar and Grid components separately.
In the blog.js file, Syncfusion Calendar component has been added.
Javascript
import React, { Component } from 'react'
import './Blog.css'
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
class Blog extends Component {
render () {
return (
<CalendarComponent id="calendar" />
)
}
}
export default Blog
In the maps.js file, Syncfusion Grid component has been added.
Javascript
import React, { Component } from 'react'
import './Maps.css'
import { ColumnDirective, ColumnsDirective, Filter, GridComponent, Group, Inject, Page, PageSettingsModel, Sort } from '@syncfusion/ej2-react-grids';
import {data} from './datasource'
class Maps extends Component {
pageSettings= { pageSize: 6 }
render () {
return (
<GridComponent dataSource={data} allowPaging={true} pageSettings={ this.pageSettings }>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' width='100'/>
<ColumnDirective field='EmployeeID' width='100' textAlign="Right"/>
<ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/>
<ColumnDirective field='ShipCountry' width='100'/>
</ColumnsDirective>
<Inject services={[Page, Sort, Filter, Group]} />
</GridComponent>
)
}
}
export default Maps
In the AsyncComponent.js file, we have implemented code splitting to dynamically import the components.
Javascript
import React, { Component } from "react";
export default function asyncComponent(getComponent) {
class AsyncComponent extends Component {
static Component = null;
state = { Component: AsyncComponent.Component };
componentWillMount() {
if (!this.state.Component) {
getComponent().then(Component => {
AsyncComponent.Component = Component
this.setState({ Component })
})
}
}
render() {
const { Component } = this.state
if (Component) {
return <Component {...this.props} />
}
return null
}
}
return AsyncComponent;
}
The Syncfusion components (Grid and Calendar) are added to the App.js file dynamically.
Javascript
// Dynamically imported components
const Home = asyncComponent(() =>
import('./Home/Home').then(module => module.default)
)
const Maps = asyncComponent(() =>
import('./Maps/Maps').then(module => module.default)
)
const Blog = asyncComponent(() =>
import('./Blog/Blog').then(module => module.default)
)
Sample Link: https://github.com/SyncfusionExamples/EJ2-React-Lazy-loading
The following screenshots show the result of the created React sample with Syncfusion components using Lazy Loading Routes.
Initial Loading
Maps Route – Syncfusion Grid component is available
Blog Route – Syncfusion Calendar component is available
Conclusion
I hope you enjoyed how to create real time charts with Syncfusion Charts.
You can refer to our React feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
