Use React.memo() and React.useMemo()
You can use React.memo() and React.useMemo() because they are two higher-order components that can help you memorize your components and prevent unnecessary re-renders. React.memo() is used to memoize the entire component and React.useMemo() memoizes the specific value or function within the component. Let’s discuss in detail:
React.memo():
Imagine you have a complex component that takes time to render. If the props of the component haven’t changed, you don’t want it to re-render unnecessarily. That’s where React.memo() comes in. It wraps your component and remembers its last rendered output based on its props.
Here is the sample code of React.memo():
Javascript
const ExpensiveComponent = React.memo(props => { // This component might do heavy calculations or render complex visuals return <div>{/* ... */}</div>; }); function MyComponent() { // Only re-renders ExpensiveComponent if its props change return <ExpensiveComponent text="Hello world!" />; } |
React.useMemo():
This helps with expensive calculations or functions within a component. Instead of recalculating them on every render, React.useMemo() stores the result and only re-computes it if the dependencies (the values used for the calculation) change.
Here is the sample code of React.useMemo():
Javascript
const MyComponent = () => { const memoizedValue = useMemo(() => { return expensiveFunction(props.data); // Only calculated when props.data changes }, [props.data]); // Recalculate if 'props.data' changes return <div>{memoizedValue}</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: