Skip to main content

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>
Labels:

Comments

Post a Comment

Popular posts from this blog

for loop in javascript - promise - .eslintrc for "for of"

the vast majority of cases  map ,  forEach ,  find  etc. can be used.  async function printFiles () { const files = await getFilePaths(); await Promise.all(files. map (async (file) => { const contents = await fs.readFile(file, 'utf8') console.log(contents) })); } const inventory = [ { name : 'apples' , quantity : 2 } , { name : 'bananas' , quantity : 0 } , { name : 'cherries' , quantity : 5 } ] ; const result = inventory . find ( ( { name } ) => name === 'cherries' ) ;   function getFirstMatching(array) { for (let item of array) { const result = heavyTransform(item); if (result) { return result; } } } Specifically this shuts down the whole no-restricted-syntax. If you want to cherry-pick, here is the current definition: 'no-restricted-syntax' : [ 'error' , { selector : 'ForInStatement' , message...
Post a Comment
Read more

setup git account on mac with ssh - push to remote denied with other login

http://burnedpixel.com/blog/setting-up-git-and-github-on-your-mac/#generatenewkey “ SSH  uses public-key cryptography to authenticate the remote computer and allow it to authenticate the user, if necessary. There are several ways to use SSH; one is to use automatically generated public-private key pairs to simply encrypt a network connection, and then use password authentication to log on.” An SSH key basically lets your computer uniquely identify itself when it connects to servers. If Github is aware of the key your computer is using, you won’t have to enter your Github username/password every time you connect. Check for pre-existing SSH keys on your computer Let’s see if your computer has one or more keys already installed: 1 2 # Point the terminal to the directory that would contain SSH keys for your user account. $ cd ~/.ssh If you get the response “No such file or directory”, skip to  Generate a new SSH Key . Otherwise, you’ll need to backup...
Post a Comment
Read more

fs.writeFile - permission issue on GCP (Google Cloud Run)

error on this: fs . writeFile ( fileName , pdfBytes , err => { if ( err ) { console . log ( err . message ) reject ( err . message ) } else resolve ( fileName ) }) #1 It looks like when deployed into Cloud Run it also requires the extra permission "Service Account Token Creator" to run  getSignedUrl . Locally for some reason this role is not required. #2 Only the directory  /tmp  is writable in Cloud Run. So, change the default write location to write into this directory. However, you have to be aware of 2 things: Cloud Run is stateless, that means when a new instance is created, the container start from scratch, with an empty  /tmp  directory /tmp  directory is an in-memory file system. The maximum allowed memory on Cloud Run is 2Gb, your app memory footprint included. In addition of your file and Airflow, not sure that you will have a lot of space. A final remark. Cloud Run is active only when it...
Post a Comment
Read more