React Fragment (<></>)

O React Fragment é uma funcionalidade nativa do React que permite agrupar múltiplos elementos filhos sem adicionar um nó extra ao DOM (na Web) ou à árvore de componentes (no Mobile).

---

1. Por que usar?

No React, todo componente deve retornar um único elemento raiz. Muitas vezes, para cumprir essa regra, acabamos adicionando divs ou Views desnecessárias, o que pode causar:

• Poluição do DOM: Árvores HTML excessivamente profundas.
• Problemas de Layout: CSS Flexbox ou Grid podem ser quebrados por elementos intermediários indesejados.
• Performance: Processamento extra para renderizar elementos que não têm função visual.

O Fragment resolve isso permitindo o agrupamento "invisível".

---

2. Sintaxe

Existem duas formas de declarar um Fragment:

A. Sintaxe Curta (<></>)

É a forma mais comum e recomendada para a maioria dos casos.

function MyComponent() {
  return (
    <>
      <Title />
      <Description />
    </>
  );
}

B. Sintaxe Explícita (<React.Fragment>)

Necessária apenas quando você precisa passar a propriedade key (geralmente dentro de loops).

function List({ items }) {
  return (
    <div>
      {items.map(item => (
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </div>
  );
}

---

3. Quando usar vs Quando não usar

✅ Quando usar

• Para agrupar elementos irmãos no retorno de um componente.
• Dentro de loops onde você não quer adicionar um container extra mas precisa de uma key.
• Para retornar múltiplos elementos de um componente que será injetado em um layout Flex/Grid.

❌ Quando não usar

• Estilização: Se você precisa de margin, padding, background ou qualquer estilo, use uma View (ou Stack/Box do Design System). Fragments não aceitam estilos.
• Acessibilidade: Se o agrupamento tem um significado semântico (ex: uma lista, um artigo), use a tag HTML correta (ul, article, section) em vez de um Fragment.

---

4. Comparação Visual

❌ Como não fazer (Poluindo o DOM)

function BadLayout() {
  return (
    <div className="flex-container">
      {/* Esta div extra quebra o flex-direction do pai */}
      <div className="wrapper">
        <ItemA />
        <ItemB />
      </div>
    </div>
  );
}

✅ Como fazer (Limpo e Performático)

function GoodLayout() {
  return (
    <div className="flex-container">
      <>
        <ItemA />
        <ItemB />
      </>
    </div>
  );
}

---

5. Regra de Ouro

Sempre prefira o uso de Fragments em vez de containers genéricos (div, View) se a única finalidade for agrupar elementos para o retorno do React. Isso mantém a árvore de renderização leve e o layout previsível.