Eu acho o &&
bem legível, mas como já foi falado aqui nos comentários, se for utilizar, precisa garantir que a comparação do lado esquerdo realmente seja à prova de erros. Eu sou mais do time ternário, acho que se o código está bem estruturado e identado, é tão legível quanto o &&
.
Agora, fora a legibilidade de código, um ponto a se considerar é como o &&
trata alguns tipos de condições:
Exemplo 1:
function Cart({items}) {
return (
<div>
<ul>
{items.length &&
items.map(item => (
<li key={item.id}>
{`Item: ${item.name} - R$ ${item.price}`}
</li>
))}
</ul>
</div>
)
}
Aqui se items
é uma array vazia, o length é 0
e portanto apenas um 0 seria renderizado. A forma ideal de se livrar disso é com o ternário!
function Cart({items}) {
return (
<div>
<ul>
{items.length
? items.map(item => (
<li key={item.id}>
{`Item: ${item.name} - R$ ${item.price}`}
</li>
))
: null}
</ul>
</div>
)
}
Aqui, se items
for uma array vazia, o length é 0
, que por sua vez é um valor falsy
. Isso nos leva para a condição false do ternário que é null
. Na tela nada é renderizado e assim se evita esse tipo de erro. Ou ainda poderia ter algo realmente personalizado do tipo:
function Cart({items}) {
return (
<div>
<ul>
{items.length
? items.map(item => (
<li key={item.id}>
{`Item: ${item.name} - R$ ${item.price}`}
</li>
))
: <p>Seu carrinho de compras está vazio!</p>}
</ul>
</div>
)
}
Exemplo 2
function ErrorHandler({error}) {
return error && <p>{error.message}</p>
}
Neste exemplo, podemos imaginar o caso de error ser undefined
. Isso geraria uma mensagem de erro no console do tipo:
Uncaught Error: ErrorHandler(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
Enfim, não é uma regra optar pelo ternário, mas acredito que é uma boa prática de escrita de código!