CODEWITHSUNDEEP
javascriptreactjsdomnext.js
feyndev
feyndev

Reputation: 152

First milliseconds of conditional rendering in React

I want to prevent my app from displaying the wrong case of a conditional rendering (before retrieving the data) during the loading phase. Let me explain, when I'm logged in (the user data is stored via useContext hook) and I refresh my page: automatically the page displays the forms for log in but it disappears a second after that my PWA understands that I'm logged in as it retrieves the user data. How can I prevent that little timing issue ? Thank you

Upvotes: 0

Views: 153

Answers (1)

Peter B
Peter B

Reputation: 24270

It should actually be quite easy to keep from rendering it, until you know for sure that it needs to be shown. Something like this:

{this.state.needToShowLogin &&
    <LoginForm />
}

In the init part (e.g. class constructor) you start with this value being false. Then change it if & when you decide that it needs to be set to true.

Upvotes: 2

Related Questions