How can I prevent re-render after state changed in React Hooks?

Functional components in React typically re-render when their state or props change, which is expected behavior. However, sometimes we want to avoid unnecessary re-renders to optimize performance. Here are several common methods to reduce or prevent unnecessary re-renders in React Hooks:

Using React.memo()

React.memo() is a higher-order component that performs a shallow comparison on the component's props. If the props have not changed, it will not re-render the component.

jsx
const MyComponent = React.memo(function MyComponent(props) {
  // Your component logic
});

useMemo Hook

useMemo can be used to memoize computed values. If the dependencies have not changed, it will not recompute the value.

jsx
const expensiveValue = useMemo(() => {
  computeExpensiveValue(a, b);
}, [a, b]);

useCallback Hook

useCallback memoizes functions, ensuring that the function instance does not change as long as the dependencies remain the same. This is particularly useful for callback functions passed to child components.

jsx
const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

shouldComponentUpdate or React.PureComponent

For class components, you can use the shouldComponentUpdate lifecycle method or extend your component from React.PureComponent, both of which can help avoid unnecessary re-renders.

shouldComponentUpdate method:

jsx
class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Return true or false to control whether to re-render
    return true; // or some condition based on props or state
  }

  render() {
    // Component rendering logic
  }
}

React.PureComponent:

jsx
class MyComponent extends React.PureComponent {
  render() {
    // Component rendering logic
  }
}

Using the Function Form for State Updates

If the new state depends on the old state, you should use the function form of setState to avoid unnecessary re-renders, as React ensures the correct order of state updates.

jsx
// Incorrect approach
const handleIncrement = () => {
  setState(state + 1);
};

// Correct approach
const handleIncrement = () => {
  setState(prevState => prevState + 1);
};

Important Considerations

Although avoiding unnecessary re-renders is a good practice, it should not be over-optimized. Maintaining complex shouldComponentUpdate logic or overusing useMemo and useCallback can make code harder to understand and maintain. Typically, you should first perform performance analysis to identify which component re-renders are actual bottlenecks, and then optimize them specifically.