Tengo una función componentDidMount que verifica si el usuario está conectado o no llamando a una API

Este es mi diseño de código resumido:

 state = { login: false }; componentDidMount() { fetch('api/login/userislogged', { method: 'GET' }) .then(response => response.json()) .then(data => { this.setState({ login: data }) }) } render() { return ( <div> {!this.state.login ? <LoginComponent childToParent={this.childToParent}/> : <> <NavMenu/> <Container> ... .... </Container> </> } </div> ); } // this function gets back the login form response to set the login state to true if it was successful childToParent = (childData) => { if (childData) { this.setState({ login: true }) } else { this.setState({ login: false }) } };

El problema es que cuando la página se carga por primera vez y el usuario inicia sesión, state.login es falso, por lo que durante un breve milisegundo muestra el formulario de inicio de sesión, luego, cuando la función recupera el resultado de API y establece state.login en verdadero , el componente vuelve a representar la página correctamente sin el formulario de inicio de sesión.

¿Hay alguna solución mejor? gracias por las respuestas <3