How to prevent a component from rendering ?
Last Updated :
06 Nov, 2023
In React JS, preventing a component from rendering simplifies to conditional rendering of the component. When UI is designed using React, we come across a situation when components are to be rendered on the screen based on some condition. For eg, In a University Information System, when a teacher logs in, different components are rendered whereas when a student logs in, different components are rendered.
Prerequisites
Approach
To prevent a component from rendering in React JS we will use the concept of conditional rendering. We will apply some conditions on for the component and they will render on the UI only if the condition is satisfied.
Steps to create React Application
Step 1: Create a react application using the following command.
npx create-react-app foldername
Step 2: Move to the Project Directory using the following command.
cd foldername
Step 3: Install the required libraries using this command
npm i @mui/material @emotion/styled
Project Structure:
The Updated dependencies in package.json file will look like:
"dependencies": {
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.14.16",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example 1: This example renders the component on the bases of display prop using conditional rendering.
Javascript
import React from "react" ;
import Rendering from "./Rendering" ;
function App() {
return (
<div className= "App" >
<div>
<h1 style={{ color: "green" }}>
GeeksforGeeks
</h1>
<h3>
Preventing Rendering of Components in
React
</h3>
<Rendering value= "display" />
<Rendering value= "notDisplay" />
</div>
</div>
);
}
export default App;
|
Javascript
import Card from "@mui/material/Card" ;
import CardContent from "@mui/material/CardContent" ;
import CardMedia from "@mui/material/CardMedia" ;
import Typography from "@mui/material/Typography" ;
import { CardActionArea } from "@mui/material" ;
export default function Rendering(props) {
if (props.value === "notDisplay" ) {
return null ;
}
if (props.value === "display" ) {
return (
<div>
<h3>Courses available on GeeksforGeeks</h3>
<div style={{ display: "inline" }}>
<Card sx={{ maxWidth: 345 }}>
<CardActionArea>
<CardMedia
component= "img"
height= "140"
alt= "green iguana"
/>
<CardContent>
<Typography
gutterBottom
variant= "h5"
component= "div"
>
Java
</Typography>
<Typography
variant= "body2"
color= "text.secondary"
>
The Java codes are first
compiled into byte code
(machine-independent
code). Then the byte
code runs on Java
Virtual Machine (JVM)
regardless of the
underlying architecture.
</Typography>
</CardContent>
</CardActionArea>
</Card>
</div>
</div>
);
}
}
|
Steps to Run the Application: Use this command in the terminal inside the project directory.
npm start
Output: This output will be visible on http://localhost:3000/ on the browser window.
Example 2: This example displays the component with only even props usign conditional rendering.
Javascript
import React from "react" ;
import Rendering from "./Rendering" ;
function App() {
return (
<div className= "App" >
<div>
<h1 style={{ color: "green" }}>
GeeksforGeeks
</h1>
<h3>
Preventing Rendering of Components in
React
</h3>
<h1 style={{ color: "green" }}>
Only Even props will be displayed
</h1>
<br></br>
<Rendering value= "1" />
<Rendering value= "2" />
<Rendering value= "3" />
<Rendering value= "4" />
<Rendering value= "5" />
<Rendering value= "6" />
<Rendering value= "7" />
<Rendering value= "8" />
<Rendering value= "9" />
<Rendering value= "10" />
</div>
</div>
);
}
export default App;
|
Javascript
export default function Rendering(props) {
if (parseInt(props.value) % 2 != 0) {
return null ;
}
if (parseInt(props.value) % 2 == 0) {
return (
<div
style={{ display: "inline" , padding: "2%" }}
>
<div
style={{
background: "green" ,
color: "white" ,
display: "inline" ,
padding: "1%" ,
}}
>
{props.value}
</div>
</div>
);
}
}
|
Steps to Run the Application: Use this command in the terminal inside the project directory.
npm start
Output: This output will be visible on http://localhost:3000/ on the browser window.
Explanation: See component is called 10 times but components with odd props are prevented from rendering by returning null.
Share your thoughts in the comments
Please Login to comment...