Use Lazy Loading
You can use the Lazy loading technique to significantly improve the performance of your react app by reducing the initial load time. This technique delays the loading of components unit they are actually needed and will optimize the initial page load time.
Javascript
import React, { Suspense } from 'react' ; const OtherComponent = lazy(() => import( './OtherComponent' )); function MyComponent() { return ( <React.Suspense fallback={<div>Loading...</div>}> <OtherComponent /> // Only loaded when user scrolls down </React.Suspense> ); } |
Top 10 tricks to make your React App Faster
React is one of the most popular, efficient, and powerful open-source JavaScript libraries for building dynamic and interactive user interfaces. It has the capability to build a large-scale application. But when the app grows it becomes very important to optimize the codebase so that it can work fast and smoothly and can handle many requests at a time without performance delay.
Table of Content
- Use React.memo() and React.useMemo():
- Use Lazy Loading:
- Use Pure Components:
- Immutable Data Structures:
- Image Optimization:
- Use of Multiple Chunk Files:
- CDN:
- Server Side Rendering:
- Performance Testing Tool:
- Use Production Mode Flag in Webpack: