React App Performance Optimization Tips

Use Production Build

Use React.Suspense and React.Lazy for Lazy Loading Components

const LazyComponent = React.lazy(() => import('./LazyComponent'));
import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function MyComponent() {
return (
<div>
<p fallback={<section>Application is Loading....</p>}>
<LazyComponent />
</Suspense>
</div>
);
}

startTransition API

setText(input)
startTransition(() => {
setText(input);
});

Automatic Batching

Virtualize a Large List Using react-window

import React from 'react';
import { FixedSizeList as List } from 'react-window';
import './style.css';

const Row = ({ index, style }) => (
<div className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style={style}>
Row {index}
</div>
);
const Example = () => (
<List
className='List'
height={150}
itemCount={1000}
itemSize={35}
width={300}
>
{Row}
</List>
);

React.memo for Component Memoization

import React from 'react';

const MyComponent = React.memo(props => {
/* render only if the props changed */
});

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store