Deja de usar “&&” para el Conditional Rendering en React

Evita errores al no usar && en los componentes de React.

Si has visto alguna aplicación de React, sabes cómo renderizar condicionalmente partes de un componente según los props y el estado. Aunque existen varias formas de representación condicional, este artículo se centra en el operador && de JavaScript. La razón principal de este énfasis es que el operador && a menudo genera errores en la interfaz de usuario, que se pueden evitar fácilmente y, a menudo, no se mencionan.

Contenido

1. ¿Cómo funciona el operador && ?
2. ¿Por qué no usar && ?
3. ¿Qué usar en lugar de && ?

Si en algún momento el contenido que comparto te ha resultado útil, puedes nominarme a GitHub Stars en este hyperlink

Con este pequeño gesto, me ayudas a conseguir más apoyo para seguir haciendo lo que hago, compartir conocimiento.

¿Cómo funciona el operador && ?

Un ejemplo clásico de su uso en React sería:

perform MyComponent({ situation }) {
  return (
    <div>
      <h1>Title</h1>
      {situation && <ConditionalComponent />}
    </div>
  );
}

Brevemente resumido:

• si situation es un valor truthy, se renderiza <ConditionalComponent />
• si situation es un valor falsy, <ConditionalComponent /> no se renderiza

¿Porqué es eso? No es nada específico de React, sino más bien un comportamiento de JavaScript y otros lenguajes de programación llamado short-circuit analysis. Es decir, si el primer operando (situation) es falso, el operador AND (&&) se detiene y no evalúa el segundo operando (<ConditionalComponent/>).

Puede intentarlo en su navegador ejecutando el siguiente fragmento de código en la consola:

// It will show an alert field.
true && alert('Howdy');

// This may not do something.
false && alert('Not hi there');

¿Por qué no usar && ?

A menudo se prefiere la sintaxis corta de && y funciona. ¡Pero! El hecho de que puedas no significa que debas hacerlo.

En nuestro caso anterior, si la condición se evalúa como true o false, obtienes lo que esperas: <ConditionalComponent /> se renderiza o no, respectivamente. Todo bien hasta ahora. Sin embargo, si la condición no se evalúa como un booleano, puede causar problemas.

Por ejemplo:

• si situation es 0, se muestra 0 en la interfaz de usuario
• si situation es undefined, obtendrá un error: “Uncaught Error: Error(…): Nothing was returned from render. This often means a return assertion is lacking. Or, to render nothing, return null.”

¿Qué usar en lugar de && ?

Para evitar mostrar algo que no desea en la interfaz de usuario, como 0, que podría estropear el diseño, use el operador ternario de JavaScript en su lugar. Es decir.

situation ? <ConditionalComponent /> : null;

Conclusión

Para evitar errores evitables en la interfaz de usuario, use el operador ternario de JavaScript para el conditional rendering de los componentes de React en lugar del operador lógico AND. Es un hechizo easy pero bastante irrompible 🧙‍♂️

🔴 BAD
situation && <ConditionalComponent />

🟢 GOOD
situation ? <ConditionalComponent /> : null

—

P.S: Si en algún momento el contenido que comparto te ha resultado útil, puedes nominarme a GitHub Stars en este hyperlink

Con este pequeño gesto, me ayudas a conseguir más apoyo para seguir haciendo lo que hago, compartir conocimiento.

Muchas gracias! 🙏🏻❤️💪🏻