React Performance - react.lazy for component, large data loading, react-router-dom

 

1. To address these problems, we setup route-based code splitting using the react-loadable npm package. We then moved to React.lazy and Suspense despite it not supporting server-side rendering at that time. We switched because there was now a built-in way to handle dynamic imports.

2. Rendering these items was putting a lot of strain on the browser and we saw a lot of jank. To fix this, we used an npm module called react-window which provides a higher-order component that controls the rendering of long lists. It does not render items that are not immediately visible. It supports lazy loading, custom properties, and event handlers. This gave us list rendering at 60fps.

https://www.apollographql.com/docs/react/pagination/core-api/

https://codesandbox.io/s/5wqo7z2np4?file=/src/App.js:0-2108

import React, { createRef, Fragment, PureComponent } from "react";

import { FixedSizeList as List } from "react-window";

import InfiniteLoader from "react-window-infinite-loader";

const LOADING = 1;

const LOADED = 2;

let itemStatusMap = {};

const isItemLoaded = index => !!itemStatusMap[index];

const loadMoreItems = (startIndex, stopIndex) => {

for (let index = startIndex; index <= stopIndex; index++) {

itemStatusMap[index] = LOADING;

}

return new Promise(resolve =>

setTimeout(() => {

for (let index = startIndex; index <= stopIndex; index++) {

itemStatusMap[index] = LOADED;

}

resolve();

}, 2500)

);

};

class Row extends PureComponent {

render() {

const { index, style } = this.props;

let label;

if (itemStatusMap[index] === LOADED) {

label = `Row ${index}`;

} else {

label = "Loading...";

}

return (

<div className="ListItem" style={style}>

{label}

</div>

);

}

}

export default function App() {

return (

<Fragment>

<p className="Note">

This demo app mimics loading remote data with a 2.5s timer. While rows

are "loading" they will display a "Loading..." label. Once data has been

"loaded" the row number will be displayed. Start scrolling the list to

automatically load data.

</p>

<InfiniteLoader

isItemLoaded={isItemLoaded}

itemCount={1000}

loadMoreItems={loadMoreItems}

>

{({ onItemsRendered, ref }) => (

<List

className="List"

height={150}

itemCount={1000}

itemSize={30}

onItemsRendered={onItemsRendered}

ref={ref}

width={300}

>

{Row}

</List>

)}

</InfiniteLoader>

<p className="Note">

Check out the documentation to learn more:

<br />

<a href="https://github.com/bvaughn/react-window-infinite-loader#documentation">

github.com/bvaughn/react-window-infinite-loader

</a>

</p>

</Fragment>

);

}

https://www.infoq.com/articles/reduce-react-load-time/

3. use Link instead of href

import { Link, useHistory } from 'react-router-dom' <Link

to={{

pathname: `/homes`,

}}

>

Search

</Link>

instead of this:

<Button href="/homes" color="primary" startIcon={<ArrowBackIcon />}>

Search

</Button>