React rendering content before props is properly mapped / set - reactjs

Question

I've created a component with React using Redux where it takes two renders before the state is mapped to the props.
with this code,
'user.private' on first render is null and on the second render, it's false
because of that, loading the page flickers between showing 'login' for a second before showing hidden content
I'd like to show the login text by default, but I don't actually want it to display if the user's private field is set to false.
class Content extends React.Component {
render() {
const { user } = this.props;
let show = false;
if (user.private === false) show = true
return (
<section>
{
show
? <p>hidden content</p>
: <p>login</p>
}
</section>
)
}
}
const mapStateToProps = state => ({
user: state.store.user
});
export default connect(mapStateToProps, {})(Content)

Answer 1

You can use switch to handle the null case (you can either show a loader or just render nothing by returning null)
I am using the component state to illustrate the idea, but you can apply it to your redux connected Component
class App extends React.Component {
state = {
user : {
private : null
}
}
componentDidMount () {
setTimeout(() => {
this.setState(() => {
return {
user : {
private : true
}
}
});
}, 2000);
}
renderContent () {
const { user } = this.state;
switch (user.private) {
case null : return <span>Loading...</span>
case false : return <p>login</p>
default : return <p>hidden content</p>
}
}
render () {
return (
<div>
{this.renderContent()}
</div>
);
}
}
ReactDOM.render(
<App/>,
document.querySelector('#root')
);
demo

Answer 2

Assumming user is initially undefined or null, you can check if user and/or its property private is defined before showing anything:
if (this.props.user == null || this.props.user.private) {
show = false;
}
The double equals null will make the condition true if the value of this.props.user is undefined or null. You could also have used !this.props.user.
In case you made your initial value for user be {} even before getting it, then you would have to do:
if (this.props.user.private == null || this.props.user.private) {
show = false;
}