Un repaso sobre renderizado condicional en React

Bueno, a pesar de que he llamado a este articulo «Un repaso sobre renderizado condicional en React» el titulo original era «Un Repaso sobre lo que te has saltado al estudiar React y renderizado condicional», pero quedaba muy largo.

Algo de lo que me he dado cuenta al estudiar programación y creo que se aplica a cualquier cosa que se estudie de la misma forma, es que nuestros primeros pasos suelen ser un reclamo desesperado por resolver un problema. Esto tiene como consecuencia de que cuando necesitamos aplicar nuestra experiencia, nos encontremos con graves huecos que tenemos que cubrir con mas información apurada. Hoy vamos a hacer un repaso repaso sobre renderizado condicional.

Este articulo es una coleccion de novedades practicas que he ido recopilando mientras voy aprendiendo otras cosas. al igual que el tutorial para la introducción a la programación orientada a objetos, el objetivo primordial de escribir esto es guardar un registro que pueda consultar en caso de necesitarlo y al mismo tiempo servirle de ayuda a mas personas que tambien lo necesiten.

Tabla de contenidos

Repaso sobre renderizado condicional en React

Una de las primeras cosas que se aprenden al comenzar en el mundo de la programación es el uso de los operadores condicionales, los cuales permiten controlar el flujo de la lógica del programa mediante preguntas simples para agregar complejidad al código. Este tiene un formato if(condición){código}else{código sino}

if(condición){
  ...
}else{
  ...
}

Por cierto, los tres puntitos, conocidos como signo ortográfico en el español, es un signo utilizado en muchísimos ámbitos y en este en especifico, representa omisión, o código omitido. El nombre del signo es elipsis. He encontrado muchísima información en este enlace y probablemente luego hable sobre el operador elipsis en el uso de matrices.

El operador condicional tiene algunas variables, algunas de las cuales no aparecen en todos los lenguajes de programación, como es el caso de switch/case en Python (hasta antes de la versión 3.10) y en este caso me voy a centrar en su versión compacta llamada Operador Ternario

Operador ternario

En programación, los operadores ternarios son una herramienta útil para escribir código de manera mas eficiente y concisa. Un operador ternario toma tres operandos y evalúa una condición, luego devuelve uno de los dos valores posibles dependiendo del resultado de esa condición. Su sintaxis puede expresarse en una sola línea de la siguiente manera:

condición ? código si: código no

Este operador es muy útil para escribir código compact que hace seguimiento de una sola variable de estado o que implementa una única decisión condicional. En lugar de escribir una estructura if-else, un operador ternario puede hacer el trabajo en una sola línea, lo que a menudo mejora la legibilidad del código y lo hace mas fácil de mantener.

Renderizado Condicional

En React, especialmente en las versiones mas recientes que usan el renderizado funcional, se tiene la siguiente estructura:

export default function MyApp() {
  return <div>
    holamundo
  </div>
}

Esta estructura permite escribir código mediante funciones que regresan, mediante un return, el código HTML que será renderizado por el virtual DOM.

En algunos casos, necesitaremos agregar condiciones a nuestro código, por ejemplo, al recibir un valor de estado verdadero o falso, por lo que podríamos usar condiciones para poder renderizar nuestro código, de la siguiente manera:

export default function MyApp() {
  var estado=0

  if(estado==0){
    return <div>
      estado falso
    </div>
  else{
    return <div>
      estado verdadero
    </div>
}

Esto, aunque puede ser practico en un inicio, mientras aumenta la complejidad del código, puede crear mucha duplicación del código y es mas difícil de mantener, por lo que podríamos optar por los operadores ternarios.

Una de las cosas que no he mencionado todavía es que un operador ternario actúa como una función que devuelve un valor de respuesta, por lo que por lo general se lo utiliza para cargar datos a una variable de la siguiente forma:

var estado=condicion ? "valorsi" : "valorno"

Así que también es posible esto utilizando condiciones :

export default function MyApp() {
  var estado=0
  var respuesta=""

  if(estado==0){
    respuesta="estado falso"
  else{
    respuesta="estado verdadero"
  }

  return <div>
    {respuesta}
  </div>
}

Lo cual puede ser traducido a operadores ternarios a una forma mas compacta:

export default function MyApp() {
  var estado=0

  return <div>
    {estado==0? "estado falso" : "estado verdadero"}
  </div>
}

Esta ultima probablemente sea la forma que has aprendido puesto que los tutoriales la prefieren al ser mas clara y fácil de utilizar, pero el tutorial oficial de React no se decanta por una u otra forma y de hecho hasta muestra ejemplos sobre como funcionan las variaciones.

Ahora bien, hay otra forma de operador condicional con un nombre mas complejo llamado operador condicional de combinación nula.

Operador condicional de combinación nula

Si, loquísimo ese nombre.

El operador condicional de combinación nula, o también llamado operador condicional de fusión, operador de coalescencia nula o simplemente x && y, es un operador introducido en JavaScript en la definición de ECMAScript 2020 que acepta dos valores y devuelve el segundo valor si el primero es null o undefined.

Este operador es muy útil en React para renderizado condicional en caso de que una variable tenga un valor distinto de null o undefined, por ejemplo:

export default function MyApp() {
  var estado=0

  return <div>
    {estado==0 && "estado falso"}
  </div>
}

Sobre la modularidad de la filosofía de Componentes de React

Gran parte del encanto de React recae en su filosofía de atomizar el problema mediante componentes que se encargan de tareas especificas, por lo que en lugar de saturar el código con condiciones, se pueden utilizar componentes que se encarguen de esa tarea, con lo que el componente principal puede ser mas fácil de corregir mientras que los componentes hijos se mantienen desconectados de la lógica del componente padre.

Por supuesto, todas las cosas que hemos revisado anteriormente se aplican al componente hijo, por lo que usando los props, es posible elegir el mejor resultado para nuestra aplicación.

function Estado(props){
  return <>{props.estado==0?"estado falso":"estado verdadero"}</>
}

export default function MyApp() {
  return <div>
    <Estado estado=1></Estado>
  </div>
}

Conclusión

Las opciones para el renderizado condicional no son pocas, pero deben ser aplicadas de forma oportuna para poder hacer mas fácil leer el código y mejorarlo en caso de ser necesario. Muchas veces nos topamos con tecnologías que no son fácilmente deducibles por su apariencia, ´pero conocer sus nombres nos ayuda a investigar sobre ellas y aprender a usarlas. El problema mas grande que he notado, es que por lo general aprendemos a programar teniendo una necesidad y queriendo un resultado, cosa que aprovechan los tutoriales para despachar código sin mayores explicaciones que saben que funciona, pero luego de eso, no sabemos adaptar nuestros conocimientos a nuevas necesidades.