Update status when switching React

Question

I’m taking the name of the person through the localstorage and passing to the state to show on screen the problem is that when I change page, Going from login page to home it does not show on screen directly already tried as componentDidMount, only when I give an F5 it appears to me on screen, I would have another alternate besides the componentDidMount and componentDidUpdate?

class Home extends Component {
    constructor(props) {
        super(props);
    
        this.state = { 
          firstname: '',
        };   
    }

    componentDidMount() {
        const name = localStorage.getItem('@front-end/firstname');
        this.setState({ firstname: name });
    }

    out = () => {
        localStorage.removeItem('@front-end/firstname');
        this.setState({ firstname: ''});
    }

    render() {
        document.title = "Home - VirtualBooks";

        return (
            <>
                <h1>Hello {this.state.firstname}</h1>
                <Link to="/login">Login</Link>
                <button onClick={this.out}>Sair</button>
            </>
        )
    }
}