Как избежать render дочернего компонента при изменении state родителя?

Question

[Fierfoxik]

Доброго времени!

Столкнулся с такой маленькой проблемой был компонент с полями для ввода и dropZone, со временем код разросся и пришлось создать отдельный дочерний компонент с dropZone, в самом же dropZone принимаются файлы и показываются уведомления, но одно уведомление и очистка уведомлений происходила при нажатии на кнопку из компонента с полями.

Таким образом я пришел к тому что будет разумнее в компоненте с полями создать state с числом при нажатии на кнопку.
т.е вот старая функция при нажатии на кнопку, и в зависимости от того что если в стейте данные мы показываем ошибку либо возвращаем наши данные в sate в исходное состояние.

takeVal() {
        if(this.state.author.length !== 0 && this.state.name.length !== 0 && this.state.imagePreviewUrl){
            this.setState({
                imgMessageClass: 'dz-message',
                imagePreviewUrl: '',
                imgStatus: false
            });
            this.clearInputs();
        }else {
            this.setState({
                imgInfoClass: 'dz-info dz-error',
                imageStatusMessage: 'Заполните все поля и загрузите обложку!'
            });
            setTimeout(()=> this.setState({
                imageStatusMessage: '',
                imgInfoClass: 'dz-info'
            }), 2500);
        }
    }

теперь же в этой функции я делаю так и передаю данное состояние через props.

if(this.state.author.length !== 0 && this.state.name.length !== 0 && this.state.imagePreviewUrl){
            this.setState({
                imgNotice: 5
            });
            this.clearInputs();
        }else {
                this.setState({
                    imgNotice: 3
                });
        }

В зависимости от полученного числа в компоненте dropZone я пытаюсь обновить state с сообщением об ошибке

componentWillReceiveProps (){
        if(this.props.imgNotice === 5){
            this.setState({
                imgMessageClass: 'dz-message',
                imagePreviewUrl: '',
                imgStatus: false
            });
        }else if(this.props.imgNotice === 3){
            this.setState({
                imgInfoClass: 'dz-info dz-error',
                imageStatusMessage: 'Заполните все поля и загрузите обложку!'
            });
            setTimeout(()=> this.setState({
                imageStatusMessage: '',
                imgInfoClass: 'dz-info'
            }), 2500);
        }
    }

Проблема заключается в том что в компоненте родителе dropZone c полями висит обработчик на полях при onchange в котором записываются введенные данные в state
т.е при изменении поля постоянно происходит render компонента и дочернего компонента dropZone , тем самым переданное через props число остается в props и срабатывает Lifecycleкомпонента и мы при любом изменении поля видим наше уведомление об ошибке.
Как будет разумнее поступить, очищать state после нажатия на кнопку или же передавать не state?

Так же хотелось бы узнать при каком Lifecycle стоит использовать setState когда мы получаем данные через props чтобы произошел render компонента.

Answer 1

[Роман Александрович]

Часто встречающаяся проблема при вложенных компонентах. Самое простое решение в этой ситуации использовать component should update. Еще один выход из положения это использовать pure components.

Answer 2

[holymotion]

shouldComponentUpdate для дочернего элемента попробуйте применить:
https://facebook.github.io/react/docs/optimizing-p...