Executando verificação de segurança...
3

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!

Carregando publicação patrocinada...
2

Muito bom os exemplos! Ao usar o &&, também podemos evitar problemas usando o Boolean ou o !!. Seguindo os exemplos:

function Cart({ items }) {
  return (
    <div>
      <ul>
        {Boolean(items.length) &&
          items.map((item) => (
            <li key="{item.id}">{`Item: ${item.name} - R$ ${item.price}`}</li>
          ))}
      </ul>
    </div>
  );
}

Ou:

function ErrorHandler({ error }) {
  return !!error && <p>{error.message}</p>;
}