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
// Filename - App.js
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;
// Filename - Rendering.js
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"
image="https://www.geeksforgeeks.org/wp-content/uploads/Java.png"
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
// Filename - App.js
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;
// Filename - Rendering.js
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.Â
Similar Reads
How to Force a Vue Component to Re-Render?
In VueJS, you may sometimes need to force a component to re-render, especially when the component doesn't update automatically due to Vue's reactivity system not detecting changes. One way to achieve this is by using a unique key attribute. Changing the key will force Vue to destroy and recreate the
3 min read
Re-rendering Components in ReactJS
Re-rendering is an important concept in ReactJS as it determines how and when components update. Understanding the re-rendering process is essential for optimizing the performance of React applications.What is Re-rendering in ReactJS?In React, a re-render happens when a component's state or props ch
5 min read
How to optimize React component to render it ?
ReactJS mainly depends upon the props (which are passed to it) and the state of the Component. Hence to reduce the number of times Component renders we can reduce the props and state it depends upon. This can be easily done by separating the logic of one component into several individual child compo
3 min read
How to conditionally render components in ReactJS ?
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook.PrerequisitesNodeJS or NPMReact JSReact
3 min read
How to implement Conditional Rendering in React?
This article explores JavaScript's conditional rendering in React JS, including various methods, syntax, and applications, leveraging React's virtual DOM, reusable components, props, and rapid rendering capabilities in single-page UI applications.We will use the following approaches to implement con
4 min read
How re-render a component without using setState() method in ReactJS ?
In React, to re-render a class-based component with an updated state we generally use the setState() method. But instead, we can use other methods to re-render a component without using setState(). Prerequisites:Â NPM & Node.jsReact JSReactJS propsReactJS forceUpdate() methodApproaches to re-rend
3 min read
How to prevent page from rendering before redirect in ReactJS ?
ReactJS is a popular front-end framework that allows developers to create dynamic and responsive web applications. One common issue that developers face when working with ReactJS is preventing a page from rendering before a redirect is complete. This can lead to issues such as slow loading times, br
4 min read
How to make Reusable React Components ?
ReactJS is a JavaScript library used to build single-page applications (SPAs). React makes it easy to create an interactive user interface by using a component-based approach. In this article, we will learn about Reusable React Components with examples. Table of Content What are Reusable React Compo
4 min read
How to wait for a ReactJS component to finish updating ?
To wait for a ReactJS component to finish updating, we use a loading state in our react application by use of the conditional rendering of the component. ApproachThis can be achieved by the use of the useState and useEffect hooks in the functional components. With the help of the state, we make sure
2 min read
How to implement useContext Hook in a Functional Component ?
In React, the useContext hook is used to consume values from a context. Context in React is a way to share values like themes, authentication status, or any other global state between components without explicitly passing the props through each level of the component tree. Syntax of useContext Hook:
2 min read