React Fragment Nedir?

React.Fragment bir komponentin çıktısını boş bir etiket olarak sarmak için geliştirilmiş bir özelliktir. Böylece bir bileşenin çıktısını div etiketi ile sarmadan kullanabiliriz.

Neden ve Ne Zaman React Fragment Kullanılmalıdır?

React ile uygulama geliştirirken bir komponentin çıktısının tek bir etiket içerisinde olması gerekir. Aksi halde sözdizimi (syntax) hatası alınacak ve uygulama çalışmayacaktır.

Bu nedenle örnek React bileşen çıktısı

return (
    <div>
        <h1>Başlık</h1>
        <p>Bir paragraf</p>
        <hr />
        <Uye />
    </div>
)

şeklinde olacaktır. Tüm komponent içeriği tek bir div etiketine sarılı olarak oluşturulacaktır.

Burada olan bir sorun fazladan bir div etiketi, DOM üzerinde fazladan bir düğüm demektir ve bu da fazladan bir yük demektir. Performansı olumsuz etkileyebiliriz. Bakınız React Performans Optimizasyonu.

Yine ayrıca farklı bir sorunda şu şekilde ortaya çıkacaktır. Mesela çıktımız bir kaç tane td tagı içeriyor olabilir.

return (
    <div>
        <td>Birinci sütun</td>
        <td>İkinci sütun</td>
        <td>Üçüncü sütun</td>
    </div>
);

Bu şekilde bir kullanımda tg tagları bir div içerisinde olacağı için bir hata söz konusu olacaktır. Son çıktı

    <table>
        <tr>
            <div>
                <td>..</td>
                <td>..</td>
                <td>..</td>
            </div>
        </tr>
    </table>

şeklinde olacağı için hatalı bir kullanım olacaktır. Bu ve benzeri sorunları engellemek için boş bir tag şeklinde kullanılan React.fragment geliştirilmiştir.

Yukarıdaki tablo örneğine döndersek

return (
    <React.Fragment>
        <td>Birinci sütun</td>
        <td>İkinci sütun</td>
        <td>Üçüncü sütun</td>
    </React.Fragment>
);

şeklinde bir kullanımda gereksiz div tagı kullanılmamış olacak ve son çıktı

    <table>
        <tr>
            <td>..</td>
            <td>..</td>
        </tr>
    </table>

şeklinde olacaktır. Bu da doğru bir kullanımdır.

React.Fragment Key Kullanımı

Eğer map içerisinde bir fragment kullanılacaksa, div veya liste elemanlarında kullanıdığımız gibi key bilgisini kullanmamız doğru ve etkin bir render açısından gereklidir. Mesela

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // `key` olmadan, React önemli bir uyarıyı tetikler
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

// Kaynak: https://tr.reactjs.org/

React.Fragment Shorthand / Kısa Yazılım

Kolay bir kullanım için React.Fragmenti kısaca <> şeklinde kullanılabilir.

return (
    <>
        <h1>Başlık</h1>
        <p>Paragraf</p>
        <hr />
    </>
);

React.Fragment vs Div Karşılaştırması

Bir komponentin çıktısını tek bir etiket içerisine almamız gerektiğini daha önce söylemiştik. Aksi halde bir sözdizimi hatası alıyoruz. Bunun için div veya React.Fragment kullanılabilir.

Eğer çıktıyı sarmaladığımız etiket bir stil alacaksa ve DOM üzerinde kullanılacaksa, mesela komponentin çıktısı sayfanın sağına yaslanacaksa div etiketi kullanılması uygun olacaktır.

Fakat bileşen çıktısını tek bir etiket altına toplamamı sadece, komponentin doğru çalışması açısından gerekli ise bu durumda React.Fragment kullanmak daha doğru olacaktır.

Bir de daha önce tablo örneğine verdiğimiz gibi durumlar bulunmakta, bu durumlarda eğer komponent çıktısı div etiketi içerisine alınırsa hata oluşmakta. Bu nedenle de bu tür komponentlerin çıktıları React.Fragment içerisine alınmalıdır.

React.Fragment Css

React.Fragment şuan için css desteği ile gelmemektedir. Bu nedenle stil bilgileri kullanılamaz. Bu nedenle de yine React.Fragment classname seçeneği de bulunmamaktadır.

Hata

Eğer bir komponent çıktısı tek bir etiket veya React.Fragment içerisine alınmazsa bu durumda aşağıdaki sözdizimi hatası oluşacaktır. Bu hatayı görüldüğünde, ilgili komponentin tüm içeriğinin tek bir etiket içerisinde olması gerektiğine dikkat etmek gereklidir.

Compiled with problems:

ERROR in ./src/App.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (72:4)

...

ERROR


src/App.js
  Line 72:4:  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (72:4)

Sonuç

Uygulama geliştirirken farklı durumlarda, farklı seçeneklerimiz bulunur. Bunları iyi bilirsek, daha etkin uygulamalar geliştirebiliriz. React ile çalışırken eğer bir komponentin çıktısını bir araya toplamak istersek React.Fragment kullanabiliriz.

Sormak istediklerinizi bizimle yorumlarda paylaşabilirsiniz.