Immutable Data Structures
Instead of directly modifying the data objects, use immutable data structures like Map from Immutable.js. These Libraries create new versions of the data whenever you want to change it, keeping the original data untouched. This helps React efficiently detect the changes and only update the necessary parts to avoid unnecessary re-renders.
Javascript
const state = Map({ items: [] }); // Update state immutably const updatedState = state.set( 'items' , [...state.get( 'items' ), newItem]); |
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:
Contact Us