Dado que su condición es falsa y, por lo tanto, no devuelve el segundo argumento ( <GeneralLoader /> ), devolverá profileTypesLoading , que es un número, por lo que reaccionar lo representará porque React omite la representación de todo lo que sea de boolean typeof undefined y lo hará representar cualquier cosa que sea typeof string o number :

Para que sea seguro, puede usar una expresión ternaria {condition ? <Component /> : null} o booleano emita su condición como {!!condition && <Component />}

0 es un valor falso, por lo que cuando es evaluado por && , devuelve 0. Sin embargo, React puede representar 0 porque es un número:

 // Renderable values 1 && <GeneralLoader /> // => Renders <GeneralLoader /> "a string" && <GeneralLoader /> // => Renders <GeneralLoader /> 0 && <GeneralLoader /> // => Renders '0' // Non-renderable values false && <GeneralLoader /> // => Renders nothing null && <GeneralLoader /> // => Renders nothing undefined && <GeneralLoader /> // => Renders nothing

TLDR

Esto se debe a cómo javascript procesa [valores verdaderos y falsos ][1]:

En JavaScript, un valor veraz es un valor que se considera verdadero cuando se encuentra en un contexto booleano. Todos los valores son verdaderos a menos que se definan como falsos (es decir, excepto falso, 0, "", nulo, indefinido y NaN).

Cuando se usa con el operador && , el valor devuelto depende del valor de la izquierda:

• Si el valor de la izquierda es verdadero, se devuelve el valor de la derecha.
• Si el valor de la izquierda es falso, se devuelve su valor.

Ejemplos:

 // Truthy values 1 && "hello" // => "hello" "a string" && "hello" // => "hello" // Falsy values 0 && "hello" // => 0 false && "hello" // => false null && "hello" // => null undefined && "hello" // => undefined

Las mismas reglas se aplican a JSX porque es [una extensión de sintaxis de JavaScript][2]. Sin embargo, el problema es que **

El problema es que 0 es un valor falso, por lo que cuando && lo evalúa, devuelve 0. Sin embargo, React puede representar 0 porque es un número.

 // Renderable values 1 && <GeneralLoader /> // => Renders <GeneralLoader /> "a string" && <GeneralLoader /> // => Renders <GeneralLoader /> 0 && <GeneralLoader /> // => Renders 0 // Non-renderable values false && <GeneralLoader /> // => Renders nothing null && <GeneralLoader /> // => Renders nothing undefined && <GeneralLoader /> // => Renders nothing

Esto resolvería el problema:

 {!!profileTypesLoading && <GeneralLoader />}

Como convertirá 0 en falso. La razón es que cuando es 0 , la siguiente condición no se ejecuta y se comporta como un número en JavaScript, por lo que la doble negación ayuda aquí.