Optimize React Application Performance

• Use the Production Build
• Profiling Components with the DevTools Profiler
• Virtualize Long Lists (hundreds or thousands of rows) - react-window / react-virtualized
• Avoid Reconciliation / Re-randor - shouldComponentUpdate
• Not Mutating Data
• Code Splitting - Multiple Chunk Files
• Lazy Loading - Dynamic import
• Lazy loading images in React
• Use Route-Based Code Splitting
• Avoid dangerouslySetInnerHTML
• Dependency optimization - Moment.js / loadash / UI lib
• Use React Fragments to Avoid Extra Tag
• Avoid Async Initialization in componentWillMount() use componentDidMount()
• Memoize React Components - React.PureComponent / React.memo
• useMemo
• useCallback
• Throttling and Debouncing Events
• Create Error Boundaries for the Components
• Avoid using Index as Key for map - Using a Unique Key for Iteration
• CSS Animation Instead of JavaScript Animation
• Analyzing and Optimizing Your Webpack Bundle Bloat
• Consider Server-side Rendering
• Enable Gzip Compression on Web Server
• Using a CDN - React / ReactDOM