How to avoid child component's render when parent's state changes?

Question

React

Good time!
I encountered such a small problem, there was a component with input fields and dropZone , over time, the code grew and I had to create a separate child component with dropZone , in the dropZone itself, files are received and notifications are shown, but one notification and notification clearing occurred when the button from the component was pressed with fields.
Thus, I came to the conclusion that it would be more reasonable in a component with fields to create a state with a number when the button is pressed.
i.e. here is the old function when the button is clicked, and depending on the fact that if we show an error in the state data, or we return our data in the sate to its original state.

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);
        }
    }

now in this function I do so and pass this state through 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
                });
        }

Depending on the received number in the dropZone component, I try to update the state with an error message

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);
        }
    }

The problem is that in the dropZone parent component with fields, a handler hangs on the fields during onchange in which the entered data is written to the state
, i.e. when the field changes, the component and the child component dropZone constantly render, thereby the number passed through props remains in props and fires The lifecycle of the component and we see our error notification with any change in the field.
How would it be wiser to do this, clear the state after pressing the button, or pass a non-state?
I would also like to know at what Lifecycle it is worth using setState when we receive data through props so that the component render occurs.

Answer 1

A common problem with nested components. The simplest solution in this situation is to use component should update. Another way out is to use pure components.

Answer 2

shouldComponentUpdate on a child element, try applying:
https://facebook.github.io/react/docs/optimizing-p...