La parte {} es una expresión JSX que le permite incrustar código JavaScript en el marcado JSX.

El && es un operador AND lógico, pero en JavaScript, en lugar de dar como resultado true o false , && hace esto:

1. Evalúa su operando de la izquierda
2. Si el valor del Paso 1 es falso , la operación && toma ese resultado como su resultado y se detiene aquí.
3. Si el valor del paso 1 es verdadero (lo contrario de falso) , la operación && evalúa el operando de la derecha y toma ese valor como resultado

Entonces props.type === "big" && <h2>{props.title}</h2> significa:

• Si props.type es "big" , coloca <h2>{props.title}</h2> aquí.
• Si no, no pongas nada aquí (porque React no representa false , null o undefined )

cómo o cuándo se debe usar

Por lo general, se usa cuando necesita renderizar algo condicionalmente. La condición es la primera parte ( props.type === "big" ). Lo que se representa, o lo que no se representa, es la segunda parte ( <h2>{props.title}</h2> ).