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 state
y 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, oseatrue
entonces<YourConditionalComponent />
se renderizaSi
condicion
no se cumple, oseafalse
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 true
o false
evidentemente 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
esundefined
vas a tener un error del tipoUncaught 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
Top comments (1)
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