React - Component, PureComponent and Stateless Component

Parent

this.state

{
    "name": "",
    "inputValue": ""
}

React.PureComponent

(Child 1)

setStateCount

renderCount

this.props

{
    "name": ""
}

this.state

{
    "age": "",
    "inputValue": ""
}

React.Component

(Child 2)

setStateCount

renderCount

this.props

{
    "name": ""
}

this.state

{
    "age": "",
    "inputValue": ""
}

Stateless Component

(Child 3)

renderCount

props

{
    "name": ""
}

*** Take note on the Child 1 (React.PureComponent), eventhough we did not change the "Age" input and we press many times the "Update Age" button, the "setStateCount" is still incremented but does not reflect in the browser since there is no re-render, for it to display the latest value, we need to change the age.