react-defer-render v0.2.0

react-defer-render

ReactDeferRender defer first rendering of specific component.

This component aim to improve fist paint time for user.

Install

Install with npm:

npm install react-defer-render

Usage

// 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/

Perf

Before

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>;
    }
}

After

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>;
    }
}

Changelog

See Releases page.

Running tests

Install devDependencies and Run npm test:

npm i -d && npm test

Contributing

Pull requests and stars are always welcome.

For bugs and feature requests, please create an issue.

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

• github/azu
• twitter/azu_re

License

MIT © azu