Operador Ternario en lugar de '&&' en ReactJS/NextJS

Ya puedes dejar de usar el operador '&&' en un Conditional Rendering de tus componentes de ReactJS/NextJS

Si has venido trabajando anteriormente con ReactJS, sabes que el renderizado de los componentes depende de dos cosas, del statey las props. Así mismo, existen diferentes formas de hacer un Conditional Rendering, aquí les voy a mostrar quizás la más utilizada para validar cuándo mostrar un componente o no en la UI, el operador &&, que funciona, pero sin embargo tiene algunos casos en los que podrías tener problemas al momento de hacer el render.

Primero te voy a mostrar cómo funciona el &&

Un ejemplo clásico de éste se ve así👇🏾

const RandomComponent = ({ condicion }) => {
  return (
    <>
      {condicion && <YourConditionalComponent />}
    </>
  );
}

La lógica de éste funciona así:

• Si condicion se cumple, osea true entonces <YourConditionalComponent /> se renderiza

• Si condicion no se cumple, osea false entonces <YourConditionalComponent /> no se renderiza.

¿Por qué? Esto más que un concepto de React es un comportamiento de Javascript que se llama short-circuit evaluation que consiste en que si el primer operador(condicion) es false entonces el operador && se detiene y no evalúa la segunda condición, en éste caso <YourConditionalComponent />

Ahora, por qué No usar el &&

Este operador tiene una sintaxis bastante simple y se utiliza mucho, de hecho funciona, pero el hecho de que algo funcione no quiere decir que debas utilizarlo.

Volviendo al ejemplo de arriba, si condicion tiene un resultado trueo falseevidentemente vas a tener el comportamiento que esperas según sea el caso, muy bien! Sin embargo ésto funciona sólamente cuando se está evaluendo condiciones que entregan un boolean, quiere decir que cualquier otro caso podrías tener problemas al momento de renderizar.

Por ejemplo:

• Si quisieras evalues un valor numérico, 0, tu componente se va a renderizar sin estar cumpliendo totalmente tu condición.
• Por otro lado, si tu condicion es undefined vas a tener un error del tipo Uncaught Error: Error...: Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

Dicho ésto ¿qué usar para un Conditional Rendering en tus componentes?

La solución es muy sencilla, si quieres evitar tener problemas que se salgan de control en tu UI, puedes usar el operador ternario de Javascript, así👇🏾

condicion ? <YourConditionalComponent /> : null

Con éste simple cambio podrás tener tu código más seguro y evitar que tu UI se rompa en algún momento del renderizado, recuerda utilizar el Operador Ternario de Javascript en lugar del operador lógico AND, simple pero efectivo.

Nos vemos en la próxima para más tips de javascript, ReactJS, NextJS, Typescript.

Sígueme en mis redes sociales como @viistorrr

• Twitter
• Instagram
• Slack

Comments

[Walter Corrales]

react.dev/learn/conditional-rendering seria bueno leer la nueva documentación de React para ver lo que la doc propone se puede usar && siempre y cuando se ponga una condición completa y no usando una sola variable, a parte la doc dice que esos problemas ocurren cuando solo usas javascript ellos ya dicen que renderizan null