Does a change in a component refresh the whole page or just that component which was changed?

so I am new to React. Loving it so far. However, I am having a basic question which doesn't have a clear answer right now.

So, I am learning how to lift the state of a component. So here's a reproducible example.

index.js

import React from "react";
import ReactDOM from "react-dom"
import {Component} from "react";

// import AppFooter from "./AppFooter";
import AppContent from "./AppContent";
import AppHeader from "./AppHeader";

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min'
import './index.css'

class App extends Component{

    constructor(props) {
        super(props);
        this.handlePostChange = this.handlePostChange.bind(this)
        this.state = {
            "posts": []
        }
    }

    handlePostChange = (posts) => {
        this.setState({
            posts: posts
        })
    }

    render() {
        const headerProps = {
            title: "Hi Keshav. This is REACT.",
            subject: "My Subject is Krishna.",
            favouriteColor: "blue"
        }
        return (
            <div className="app">
                <div>
                    <AppHeader {...headerProps} posts={this.state.posts} handlePostChange={this.handlePostChange}/>
                    <AppContent handlePostChange={this.handlePostChange}/>
                </div>
            </div>

        );
    }
}

ReactDOM.render(<App/>, document.getElementById("root"))

I am trying to lift the state of posts which is changed in AppContent to AppHeader. Here's my AppContent.js and AppHeader.js

// AppContent.js
import React, {Component} from "react";

export default class AppContent extends Component{

    state = {
        posts: []
    }

    constructor(props) {
        super(props); // constructor
        this.handlePostChange = this.handlePostChange.bind(this)
    }

    handlePostChange = (posts) => {
        this.props.handlePostChange(posts)
    }

    fetchList = () => {
        fetch("https://jsonplaceholder.typicode.com/posts")
            .then((response) =>
                response.json()
            )
            .then(json => {
                // let posts = document.getElementById("post-list")
                this.setState({
                    posts: json
                })
                this.handlePostChange(json)
            })
    }
    clickedAnchor = (id) => {
        console.log(`Clicked ${id}`)
    }
    render() {
        return (
            <div>
                <p>This is the app content.</p>
                <button onClick={this.fetchList} className="btn btn-outline-primary">Click</button>
                <br/>
                <br/>
                <hr/>
                <ul>
                    {this.state.posts.map((item) => {
                        return (
                            <li id={item.id}>
                                <a href="#!" onClick={() => this.clickedAnchor(item.id)}>{item.title}</a>
                            </li>
                        )
                    })}
                </ul>
                <hr/>
                <p>There are {this.state.posts.length} entries in the posts.</p>
            </div>
        )
    }
}

// AppHeader.js
import React, {Component, Fragment} from "react";

export default class AppHeader extends Component{

    constructor(props) {
        super(props); // constructor
        this.handlePostChange=this.handlePostChange.bind(this)
    }

    handlePostChange = (posts) => {
        this.props.handlePostChange(posts)
    }

    render() {
        return (
            <Fragment>
                <div>
                    <p>There are {this.props.posts.length} posts.</p>
                    <h1>{this.props.title}</h1>
                </div>
            </Fragment>
        )
    }
}

So here's the main question. As we see, that I am calling the dummy posts api and trying to show the titles of the json object list returned by it.

The posts state is actually updated in AppContent and is shared to AppHeader by lifting it to the common ancestor index.js

However, here's what I have observed. When I keep this code running using npm start I see that anytime I make a change in any place, it refreshes. I was under the impression that it renders the whole page running on localhost:3000.

Say here's my current situation on the web page:

Now, say I make a change in just AppContent.js, then here's how it looks then:

In here, we see that it's still showing 100 posts in case of AppHeader. Is this expected that react only reloads the component and not the whole page. When I refresh the whole page, it shows 0 posts and 0 posts in both the places. Now have I made a mistake in writing the code ? If yes, how do I fix this ?

Thank you. In case the question is not clear please let me know.