React performance optimization

1. React performance issues

1 What are the principles of React performance optimization?

• Avoid unnecessary re-renders and minimize the number of component renders
• Use PureComponent or shouldComponentUpdate to avoid unnecessary rendering
• Avoid complex calculations or operations in the render method, which can be performed in other methods of the component life cycle
• Use the performance tools provided by React for performance analysis and optimization
• On-demand loading with React.lazy and React.Suspense
• Use memoization technology to cache calculation results to avoid repeated calculations
• Use React.memo to shallow compare components, avoiding unnecessary rendering

2. What are the methods of React performance optimization?

• Use the shouldComponentUpdate lifecycle function to avoid unnecessary rendering and improve performance. The sample code is as follows:

  class MyComponent extends React.Component {
        
        
    shouldComponentUpdate(nextProps, nextState) {
        
        
      return this.props.someProp !== nextProps.someProp;
    }
    render() {
        
        
      return <div>{
        
        this.props.someProp}</div>;
    }
  }
  

- Use React.memo() higher-order components to cache components to avoid unnecessary rendering. The sample code is as follows:

const MemoizedComponent = React.memo(MyComponent);

- Use React.lazy() and Suspense components to lazy load components to improve the loading speed of the first screen. The sample code is as follows:

 const MyComponent = React.lazy(() => import('./MyComponent'));
 function App() {
    
    
   return (
     <div>
       <Suspense fallback={
    
    <div>Loading...</div>}>
         <MyComponent />
       </Suspense>
     </div>
   );
 }

- Use React.useCallback() and React.useMemo() to avoid unnecessary function calls and calculations and improve performance. The sample code is as follows:

function MyComponent({
     
      someProp }) {
    
    
  const memoizedCallback = React.useCallback(() => {
    
    
    // do something with someProp
  }, [someProp]);
  const memoizedValue = React.useMemo(() => {
    
    
    // do some heavy calculation with someProp
    return someResult;
  }, [someProp]);
  return (
    <div>
      <button onClick={
    
    memoizedCallback}>Click me</button>
      <div>{
    
    memoizedValue}</div>
    </div>
  );
}

- Use React.PureComponent to avoid unnecessary rendering and improve performance. The sample code is as follows:

class MyComponent extends React.PureComponent {
    
    
 render() {
    
    
   return <div>{
    
    this.props.someProp}</div>;
 }
}

3. What is the reason for using shouldComponentUpdate in React?

- What is the reason for using shouldComponentUpdate in React?

In React, every time a component's state or properties change, the component re-renders . However, in some cases, changes in the state or properties of the component will not affect the UI display of the component. At this time, unnecessary rendering will occur, resulting in performance problems. To solve this problem, React provides the shouldComponentUpdate method, which allows us to manually control whether the component needs to be re-rendered.

For example, suppose we have a list component whose data source is an array. When we add an element to this array, the state of the list component changes, causing the component to re-render. However, since the list component only displays the contents of the array and does not modify the array, re-rendering is unnecessary. At this time, we can implement the shouldComponentUpdate method in the list component to determine whether the state of the component has changed. If there is no change, return false to tell React that the component does not need to be re-rendered. This avoids unnecessary rendering and improves performance.

4. What is the reason for using PureComponent in React? -

In React, component rendering is a relatively performance-consuming operation. React re-renders components when their props and state change. If the props and state of the component have not changed, but the component is still re-rendered, it will cause unnecessary performance waste. To avoid this, PureComponent in React can be used. PureComponent will automatically compare whether the props and state of the component have changed in the shouldComponentUpdate life cycle method. If there is no change, the component will not be re-rendered, thereby improving performance.

Sample code:

import React, {
    
     PureComponent } from 'react';

class MyComponent extends PureComponent {
    
    
 render() {
    
    
   return <div>{
    
    this.props.name}</div>;
 }
}