React Conditional Rendering

YOU ARE READING

Short Story

React Conditional Rendering is a powerful feature in React that allows developers to create dynamic and interactive user interfaces (UI). In the simplest terms, 'conditional rendering in React' refers to displaying different components or elements b...

#developers #react #reactdevelopers #reactjs

React Conditional Rendering

Start from the beginning

by cronjrajasree

                                        
                                                  Greater Control with React Conditional Rendering
The ability to check conditions multiple times before rendering a certain component, commonly referred to as 'react conditional rendering', offers developers greater control over the application's UI and behavior. This proves to be especially useful when dealing with multiple dependencies that can affect the UI rendering.
Conditional Rendering for Performance Optimization
React conditional render isn't just about UI changes. It also plays a role in optimizing application performance. By rendering only what's necessary based on certain conditions, React apps can avoid unnecessary rendering and thus save valuable processing power, leading to smoother and faster applications.
In conclusion, conditional rendering in React is not just a handy feature; it's essential in creating responsive, user-friendly applications. It provides developers the tools to create dynamic UIs, manage complex scenarios, optimize performance, and overall, gives them greater control over how and when components are rendered.
How does React Conditional Rendering Work?
Consider an example of how to use the sign-in/signout button. The sign-in and sign-out buttons will be separate components. If the user signs in, sign-out the component will be used to display the sign-out button. This scenario is called conditional rendering.
In react we have different ways to do Conditional rendering. They are as follows:
If/else
Ternary operator
Logical && operator
Switch case operator
Prevent rendering with null
Conditional Rendering with enum
Immediately-Invoked Function Expressions (IIFE)
Subcomponents
High Order Components (HOCs)
 1) If/else
It is a simple way of rendering in react using if/else. The syntax of if/else is the same as javascript, but in react a return statement needs to be defined for each if / else declaration, which makes the code repetitive and not simple to read and modify.
import React from 'react';    
class ConditionalRendering extends React.Component{    
      constructor(props){    
           super(props);    
                this.state ={    
                IsLoggedIn : false    
                }
     }    
           render(){    
              if(this.state.IsLoggedIn){    
                 return
Welcome User
 	             }            else{ 	              return
You need to login
 	          } 	      }; 	 } export default ConditionalRendering;
2) Ternary operator
Ternary operators can be used to replace if/else and also in cases where two blocks alternate given a certain condition.
Syntax: Condition?  statement 1:  statement 2
If the condition is true then statement 1 will be rendered otherwise statement 2 will be rendered