Why does it loop and how to avoid it?

Question

React

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

Tell me why it goes into an infinite loop and how to avoid it?
The problem is that I need availableHeight to be the height of the component. Initially called setState in WillMount, but for some reason it considered the height with a lagging of one step.

Answer 1

Because you set state -> component re-renders -> will update fires -> you set state -> component re-renders...