Почему зацикливается и как этого избежать?

Question

[danilr]

componentWillUpdate() {
        console.log('componentWillUpdate');
        const {pageScroll} = this.props;
        this.setState({
            availableHeight: pageScroll ? document.querySelector('#page').clientHeight : findDOMNode(this) ? findDOMNode(this).clientHeight : 0
        });
    }

Подскажите почему уходит в бесконечный цикл и как этого избежать?
Сама проблема в том, что мне надо чтобы availableHeight был высотой компонента. Изначально вызывал setState в WillMount, но почему то он считал высоту с отстованием в один шаг.

Comments

[Петр Мухуров]

willUpdate утопал в deprecated, и скоро будет удален, кроме того, можно (и, наверное, нужно?) такие вещи через ref реализовывать

Answer 1

[real2210]

Потому что ты устанавливаешь состояние -> компонент ре-рендерится -> срабатывает will update -> ты устанавливаешь сосотояние -> компонент ре-рендерится ...

Answer 2

[Антон Спирин]

Варианты:
1. Использовать componentDidMount.
2. Если вы никак не изменяете состояние во время работы компонента, вам следует отказаться от использования state и использовать props напрямую.
3. Делать обновление состояния по изменению определенного свойства:

componentDidUpdate(prevProps) {
  if (prevProps.someProp !== this.props.someProp) {
    this.setState({ ... });
  }
}

componentWillUpdate - не рекомендован к использованию, используйте вместо него componentDidUpdate.