Не вызывается метод shouldComponentUpdate

09 июля 2021, 18:40

Версия React 16.9.0. При обновлении props-ов не вызывается метод shouldComponentUpdate. При этом отлично работает метод componentDidUpdate и componentWillUpdate.

class Component extends React.Component {
    shouldComponentUpdate( nextProps, nextState ) {
        console.log( 'shouldComponentUpdate' );
        return true;
    }
    componentWillUpdate( ) {
        console.log( 'componentWillUpdate' );
    }
    componentDidUpdate() {
        console.log( 'componentDidUpdate' );
    }
    render() {
        console.log( 'isInited', this.props.isInited );
        ...
    }
}

В консоли:

isInited false

componentWillUpdate

isInited true

componentDidUpdate

Answer 1

Проверил на React v16.9.0 работу Вашего кода, передал одну пропсу и изменил ее. Всё отработало как нужно, пример кода:

class Child extends React.Component { 
  shouldComponentUpdate(nextProps, nextState) { 
    console.log('shouldComponentUpdate'); 
    return true; 
  } 
 
  componentWillUpdate() { 
    console.log('componentWillUpdate'); 
  } 
 
  componentDidUpdate() { 
    console.log('componentDidUpdate'); 
  } 
 
  render() { 
    console.log('isInited', this.props.isInited); 
    return <div > It works... < /div>; 
  } 
} 
 
 
class App extends React.Component { 
  constructor(props) { 
    super(props); 
 
    this.state = { 
      isInited: false 
    }; 
  } 
 
  componentDidMount() { 
    this.setState({ 
      isInited: true 
    }); 
  } 
 
  render() { 
    return <Child isInited={this.state.isInited} /> 
  } 
} 
 
ReactDOM.render( 
  <App /> , 
  document.getElementById('container') 
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> 
<div id="container"> 
  <!-- This element's contents will be replaced with your component. --> 
</div>

Сссылки на React v16.9.0 брал из официальной документации: React v16.9.0

Прикреплю на всякий случай ссылки на документацию:

shouldComponentUpdate
UNSAFE_componentWillUpdate
componentDidUpdate

Есть подозрения, что Вы что-то делаете не так. Метод shouldComponentUpdate не вызывается при первом рендере или когда используется forceUpdate(). Может Вы использовали forceUpdate() в своем коде. Необходимо пройти по всему коду и найти причину "магического" поведения. Из коробки всё работает как нужно, предоставленный пример наглядно это демонстрирует:

Также, есть некоторые подозрения на React Redux, исходя из следующей документации: Return Values Determine If Your Component Re-Renders где говорится о том, что React Redux внутренне реализует метод shouldComponentUpdate. Я бы проверил эту теорию, но не исключаю человеческий фактор ошибки, например возвращение измененного объекта с той же ссылкой является распространенной ошибкой, которая может привести к тому, что ваш компонент не будет повторно визуализироваться, как ожидается (об этом также говорится в ссылке выше).