Example of React's method to avoid unnecessary rerendering

1. Use the cache component

Helps you skip re-rendering when the component's props have not changed. However, if you do not implement a custom comparison function, it is easy to abuse.。

Incorrect usage:

const MemoizedComponent = (MyComponent);

This only checks if the props reference has changed, which may not always be sufficient.

Correct usage:

const MemoizedComponent = (MyComponent, (prevProps, nextProps) => {
  return  === ;
});

Here we use a custom comparison function, which onlyitemIdRe-rendering is triggered when prop changes.

2. Avoid excessive use of inline functions

Using inline functions in JSX may result in unnecessary re-rendering, because React treats new functions as new props each time they render.

Incorrect usage:

function ButtonComponent() {
  return <button onClick={() => handleClick()}>Click me</button>;
}

This will cause recreation on each renderhandleClick, resulting in unnecessary re-rendering.

Correct usage:

import { useCallback } from 'react';
 
function ButtonComponent() {
  const handleClick = useCallback(() => {
    // Handle click logic
  }, []);
 
  return <button onClick={handleClick}>Click me</button>;
}

By usinguseCallback, we rememberhandleClickFunctions prevent unnecessary recreation every time they are rendered.

3. Use PureComponent

When using class components, useIt is possible to ensure that the component re-renders only when its props or state changes. If you are using, which may result in unnecessary re-rendering.

Incorrect usage:

class CardComponent extends  {
  // Component logic
}

Correct usage:

class CardComponent extends  {
  // Component logic
}

Avoid unnecessary re-rendering by extending the shallow comparison of props and state.

4. Optimize the useSelector in the functional components

When using useSelector from react-redux, it is important to select only the necessary state slices.

Incorrect usage:

import { useSelector } from 'react-redux';
 
const DataComponent = () => {
  const globalState = useSelector((state) => state);
  // Render logic
};

This will cause the component to re-render when any part of the state changes.

Correct usage:

import { useSelector } from 'react-redux';
 
const DataComponent = () => {
  const selectedData = useSelector((state) => );
  // Render logic based on specific slice
};

Re-rendering can be minimized by selecting only the necessary parts of the state.

5. Implement shouldComponentUpdate in class components

For class components that do not extend PureComponent, manually implementing shouldComponentUpdate allows for more granular control over when components are re-rendered.

Incorrect usage:

class ListItem extends  {
  // Component logic
}

This will re-render every time the parent component renders, even if props and state are not changed.

Correct usage:

class ListItem extends  {
  shouldComponentUpdate(nextProps, nextState) {
    return  !==  ||  !== ;
  }
 
  // Component logic
}

By customshouldComponentUpdateWe ensure that the components are only initemIdprop orvalue Re-render when the state changes.

The above is the detailed content of the method example of React avoiding rerendering. For more information about React avoiding rerendering, please pay attention to my other related articles!