Use Pure Components
These are special components that implement the `PureComponent
`
class and override the `shouldComponentUpdate
`
lifecycle method. This method checks if the props and state have changed before allowing the component to re-render. If the props and state have not changed then the render part is skipped. This means that they can only re-render when their props and state change.
Javascript
class MyPureComponent extends PureComponent { render() { return <div>{ this .props.name}</div>; } } |
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: