I have just started to learn React and want to understand the difference in props and state behavior. I have two files App.js and Counter.js.

App.js:

import Counter from './Counter'

function App() {
  return (
    <Counter initialCount={2} />
  )
}

export default App;

And Counter.js:

import React, { Component } from 'react'

export default class Counter extends Component {
    constructor(props) {
        super(props)

        this.state = {
            count: props.initialCount
        }
    }

    render() {
            return (
                    <div>
                    <button>-</button>
                    <span>{ this.state.count }</span>
                    <button>+</button>
                </div>
            )
    }
}

When I change initialCount in App.js and save file, it only changes in browser automatically if I have { this.props.initialCount } in <span></span>.

If I have { this.state.count } between spans (as in the code above), and try to change initialCount in App.js and hit save, then the value in doesn't change in browser. If I refresh the browser or change something in Counter.js after that and hit save (even adding simple space anywhere), then it updates the value without me having to refresh the browser.

I use Chrome and ReactDeveloperTools. From Components tab I can see that after I hit save in App.js, it changes props to the new value, but state is still the same.

It seems that constructor only called once. But I still don't understand this behavior.