Best Ways To Optimize React Sites

React Performance Optimization is easy to achieve with the following simple steps.

• Using React Hooks and working with functional programming
• Use React.memo for Component Memorization
• Using the shouldComponentUpdate Life Cycle Event
• Using Lazy Loading of React Components
• Use React Fragments to Avoid Extra Tag
• Do Not Use React Inline Function Definition
• Avoid Async Requests in componentWillMount()
• Bind Function Early in Constructor
• Arrow Functions vs Binding in Constructors
• Avoid Using Inline Style Attribute
• Optimize Conditional Rendering in React
• Don’t Derive Data in the Render Method
• Create Error Boundaries for the Components
• Immutable Data Structures for Components
• Using a Unique Key for Iteration
• Throttling and Debouncing Events
• Using CDNs for External Resources
• CSS Animation Instead of JavaScript Animation
• Enable gzip Compression on the Web Server
• Use Web Workers for CPU Extensive Tasks
• Server-Side Rendering of the React Component

Some Videos To Refer

Some article's and Links To Refer

10 Ways to Optimize Your React App’s Performance

10 Ways to Optimize Your React App’s Performance | by Chidume Nnamdi 🔥💻🎵🎮 | Bits and Pieces

Chidume Nnamdi 🔥💻🎵🎮 ・ Apr 13, 2021 ・

blog.bitsrc.io

React Performance Optimization

Sagar ・ Apr 26 '20 ・ 4 min read

#react #javascript

React Performance Optimization Tips

Harsh ・ Dec 27 '20 ・ 5 min read

#react #javascript #performance #webdev