DEV Community

Cover image for Optimize React Application Performance
Asif Vora
Asif Vora

Posted on

3

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

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)