How to prevent a component from rendering ?

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

• React JS
• React JS conditional rendering
• React JS functional components

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;

Javascript

// 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;

Javascript

// 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.