2022-10-19

Rendering Condizionale in React, il modo corretto

Categoria: development

Una delle funzionalità più simpatiche che ho scoperto usando React e me lo ha fatto apprezzare è il rendedring condizionale di elementi, ovvero quel pattern per cui, per esempio, a seconda se ci sia o meno una certa condizione (o stato, senza voler introdurre troppa complessità), permette di ritornare (oppure no) un componente o blocco di codice.

Prima di questa scoperta, per ottenere lo stesso scopo mi toccava perdere neuroni e diotrie nei meandri di cicli e verificare le condizioni; questo pattern risulta estremamente comodo, veloce ed elegante e a mio avviso semplifica non poco la vita allo sviluppatore.

Come lo ho usato fino oggi: &&

Il classico esempio:

function MyComponent({ condition }) {
  return (
    <div>
      <h1>Title</h1>
      {condition && <ConditionalComponent />}
    </div>
  );
}

Che potremmo riassumere come: se "condition" è vera allora ritorna "ConditionalComponent" se è falsa no.
Questo non è tipicamente un aspetto relativo a React ma un "comportamento" di JavaScript che ho scoperto venga definito Short-circuit Evaluation, un'espressione con operatori logici che si valuta da sinistra a destra.

Problemi con uso di &&

La condizione è che sia valutata come vero o falso, ma se invece lo valutassimo come non booleano?
Se per esempio la condizione fosse "0" o "undefinied"? La faccio breve, potremmo avere errori o il mio preferito "null".

Il modo giusto, ovvero come lo scriveremo da oggi in poi

Tornare alla grande catena dei Loop? Ma per carità!
Resterei sempre nell'ambito del oneliner, diciamo, ma il modo giusto ora è quello della Ternary Expression:

function MyComponent({ condition }) {
  return (
    <div>
      <h1>Title</h1>
      {condition ? <ConditionalComponent /> : null}
    </div>
  );

Conclusione

Cosa pensi di questa soluzione per evitare bug (🐛) che si generano con l'uso dell'operatore &&?
Personalmente penso sia molto elegante e funzionale, previene errori e mi costringe anche a ragionare su come ritornare eventuali eccezioni.

Spotify è spento
Enjoy the Silencetorna presto!