Introducción

El trabajo con React implica la creación de UI (User Interface) y estás, a su vez, implican la manipulación de los elementos que el usuario ve (o deja de ver) producto de su interacción con la aplicación. El Renderizado Condicional es una técnica que nos permite aprovechar el trabajo que el virtualDOM realiza al momento de leer los valores almacenados en el Objeto State para mostrar u ocultar elementos/Componentes que, en definitiva, modifiquen lo que el usuario ve.

Manipulando la vista mediante el State

Cuando creamos un valor de State dentro de un Componente (Objeto State/Hook useState), el virtualDOM almacena esa información en su memoria. Esto es conocido como el Estado Inicial. 

React es una librería reactiva, por lo tanto, la idea es que ese Estado Inicial será modificado a lo largo de la ejecución de la aplicación y, como consecuencia de ese cambio, la vista se cambiará de forma automática.

El virtualDOM, entonces, tiene un doble trabajo. Por un lado, almacenar el Estado Inicial y generar la vista correspondiente a esos valores; y, por el otro, almacenar la modificación y actualizar la vista según corresponda.

Para entender como funciona vamos a suponer que, usando JS vanilla, creamos una variable llamada montar, cuyo valor es un dato de tipo booleano false.

Si creamos una estructura condicional if/else que tome el valor almacenado dentro de esa variable, el código que se ejecutaría sería el que pongamos dentro del else.



En JS Vanilla podríamos, unas líneas más abajo, cambiar el valor almacenado en la variable montar y volver a escribir el mismo if/else para obtener el código inverso.



En este simple ejemplo, la variable montar lo que se conoce como Variable de Estado.
Las Variables de Estado son aquellas que arrancan con un valor inicial y van modificando su valor almacenado a lo largo de la ejecución de un programa, afectando así a la lógica.

Los distintos valores almacenados dentro del Objeto State o creados usando el Hook useState son Variables de Estado que el virtualDOM almacena y modifica para afectar a la lógica de visualización de nuestros Componentes.

Ejemplos de Renderizado Condicional


Renderizado de Listas

Para que el virtualDOM sea capaz de realizar correctamente el trabajo con el Renderizado Condicional cuando hace el primer renderizado de la aplicación, además de almacenar los Valores de Estado Inicial, genera un identificador único para cada Componente en el Árbol de Componentes. Este identificador le permite distinguir entre distintas copias de un mismo Componente para, al momento de generar las distintas modificaciones, no cambiar la copia equivocada.

Cuando trabajamos con la generación de vistas, es muy común utilizar elementos almacenados en un Array y bucles que los recorran. El problema es que React no puede generar un identificador único para cada elemento generado de esta forma, por lo que es responsabilidad del Desarrollador agregarlo manualmente. Para eso tenemos el "atributo" key.

El valor que declaremos dentro del "atributo" key debe ser único e irrepetible para cada iteración de un array.



Concusión

El virtualDOM, a través del Renderizado Condicional, nos ayuda a reutilizar la lógica de renderizado de los distintos Componentes. Para lograrlo, genera un identificador único para cada copia de Componente en nuestro Árbol de Componentes. Identificador que luego utiliza pasa saber qué Componentes debe modificar cuando se modifiquen las Variables de Estado.

Cuando usamos Arrays para generar vistas, necesitamos proporcionar nosotros este identificador único porque el virtualDOM es incapaz de hacerlo.