¿Cómo evitar que un componente se renderice?

React es una biblioteca de JavaScript declarativa, eficiente y flexible para crear interfaces de usuario. Es ‘V’ en MVC. ReactJS es una biblioteca front-end de código abierto basada en componentes responsable solo de la capa de visualización de la aplicación. Es mantenido por Facebook.

Cuando la interfaz de usuario se diseña con React, nos encontramos con una situación en la que los componentes deben representarse en la pantalla en función de alguna condición. Por ejemplo, en un sistema de información universitario, cuando un profesor inicia sesión, se procesan diferentes componentes, mientras que cuando un estudiante inicia sesión, se procesan diferentes componentes.

Esto se llama Representación condicional de componentes React.

Representación condicional: para crear múltiples componentes y representarlos en función de algunas condiciones. Este también es un tipo de encapsulación compatible con React. 

¿Cómo hacer el renderizado condicional?

Se hace usando stateVariable. El valor de stateVariable determina si renderizar el componente o no. Su valor se puede cambiar por la ocurrencia de cualquier evento como onClick.

¿Cómo evitar que un componente se renderice? Para evitar que un componente se represente según la condición, devuelva «NULL» 

Creando la aplicación React:

Paso 1: Cree una aplicación de reacción usando el siguiente comando.

npx create-react-app foldername

Paso 2: una vez hecho esto, cambie su directorio a la aplicación recién creada usando el siguiente comando.

cd foldername

Estructura del proyecto: El proyecto debería verse así:

Ejemplo 1: en este ejemplo, devolveremos una tarjeta que muestra cierta información. Esta tarjeta está asignada a un componente funcional, es decir, <Rendering /> 
En app.js , llamaremos a este componente dos veces con algunos accesorios. Según el valor de los accesorios, si el valor pasado es «mostrar», se devuelve el componente; de ​​lo contrario, se devuelve nulo.

import React from 'react'
import { useState } from 'react';
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';
import Divider from '@mui/material/Divider';
import Stack from '@mui/material/Stack';
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 >
        )
    }
}
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;

Producción:
 

Explicación: solo tenga en cuenta que <Rendering /> se llama dos veces, pero solo se representa 1 vez el componente en la pantalla. 

Ejemplo 2: en este ejemplo, mostraremos la llamada al componente pasando enteros como accesorios. Pero solo se mostrarán los números pares. Se evitará que los números impares se representen devolviendo nulo.

import React from 'react';
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>
        )
    }
  
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;

Producción:

Explicación: el componente See se llama 10 veces, pero los componentes con accesorios impares no pueden renderizarse al devolver un valor nulo.