Delay in component unmounting

Question

I am using navigation and sidebar components inside of my App.js file, as they are present across whole application, hence I would not want to re-render them, however these 2 components should be only displayed for logged in users, hence App component looks like this:

export default class App extends React.Component {
  render () {
    return (
      <div className={cx('App')}>
        {(this.props.authenticated) ? (<Navigation />) : null}
        {this.props.children}
        {(this.props.authenticated) ? (<Sidebar />) : null}
      </div>
    )
  }
}

Now the issue, as this.props.children change when routes change (ie children are usually Page components) when I get to the logout page, that means that uses no longer see Sidebar and Navigation components, for a split second I see children disappear first and then Sidebar and Navigation, this leads to somewhat unpleasant ui transition and I would like to know if there is a way to force components unmount synchronously?

Answer 1

Try something like this maybe ?

export default class App extends React.Component {
  render () {
    if(this.props.authenticated){
      return (
        <Navigation />
        {this.props.children}
        <Sidebar />
      )
    }else{
      return ({this.props.children})
    }

  }
}