ReactDeferRender
defer first rendering of specific component.
This component aim to improve fist paint time for user.
Install with npm:
npm install react-defer-render
// LICENSE : MIT
"use strict";
const React = require("react");
const ReactDeferRender = require("react-defer-render");
import ComplexComponent from './ComplexComponent/ComplexComponent';
export default class App extends React.Component {
render() {
// Recommened: placeholder elemenet should have height and width for recovering scroll position
const style = {
height: 300
};
return <div className="App">
<ComplexComponent count={3000}/>
<ComplexComponent count={3000}/>
<ComplexComponent count={3000}/>
<ReactDeferRender node={<ComplexComponent count={3000}/>}>
<div className="PlaceHolder" style={style}>
</div>
</ReactDeferRender>
<ReactDeferRender node={<ComplexComponent count={3000}/>}>
<div className="PlaceHolder" style={style}>
</div>
</ReactDeferRender>
<ReactDeferRender node={<ComplexComponent count={3000}/>}>
<div className="PlaceHolder" style={style}>
</div>
</ReactDeferRender>
</div>;
}
}
See public/
Finish first render: 1517.4099999999999ms
// LICENSE : MIT
"use strict";
const React = require("react");
import ComplexComponent from './ComplexComponent/ComplexComponent';
export default class App extends React.Component {
render() {
return <div className="App">
<ComplexComponent count={3000}/>
<ComplexComponent count={3000}/>
<ComplexComponent count={3000}/>
<ComplexComponent count={3000}/>
<ComplexComponent count={3000}/>
<ComplexComponent count={3000}/>
</div>;
}
}
Finish first render: 935.575ms
Reduce 50%(ComplexComponent * 3)
// LICENSE : MIT
"use strict";
const React = require("react");
const ReactDeferRender = require("react-defer-render");
import ComplexComponent from './ComplexComponent/ComplexComponent';
export default class App extends React.Component {
render() {
// Recommened: placeholder elemenet should have height and width for recovering scroll position
const style = {
height: 300
};
return <div className="App">
<ComplexComponent count={3000}/>
<ComplexComponent count={3000}/>
<ComplexComponent count={3000}/>
<ReactDeferRender node={<ComplexComponent count={3000}/>}>
<div className="PlaceHolder" style={style}>
</div>
</ReactDeferRender>
<ReactDeferRender node={<ComplexComponent count={3000}/>}>
<div className="PlaceHolder" style={style}>
</div>
</ReactDeferRender>
<ReactDeferRender node={<ComplexComponent count={3000}/>}>
<div className="PlaceHolder" style={style}>
</div>
</ReactDeferRender>
</div>;
}
}
See Releases page.
Install devDependencies and Run npm test
:
npm i -d && npm test
Pull requests and stars are always welcome.
For bugs and feature requests, please create an issue.
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
MIT © azu