How to prevent component from rendering?

You can prevent component from rendering by returning null based on specific condition. This way it can conditionally render component.

function Greeting(props) {
if (!props.loggedIn) {
return null;
return <div className="greeting">welcome, {}</div>;
class User extends React.Component {
constructor(props) {
this.state = {loggedIn: false, name: 'John'};
render() {
return (
//Prevent component render if it is not loggedIn
<Greeting loggedIn={this.state.loggedIn} />
<UserDetails name={}>

In the above example, the greeting component skips its rendering section by applying condition and returning null value.

May 14, 2022