![React Fragments](/images/gallery/reactfragment.webp) In the React world, we constantly strive for clean and efficient code. Fragments are one of the key tools for that — but choosing between the short (`<>`) and full (``) syntax has important technical implications. Both options solve the same problem — grouping elements without creating an extra DOM node. This is the foundation of clean, semantic markup. ## The key difference is in props ### Short syntax `<>` A concise and convenient way for simple grouping. Its main characteristic — it **does not support any attributes**. ### Full syntax `` A full-featured component that allows passing attributes. The most important one is `key`. ## The technical foundation The difference comes from how JSX is compiled into JavaScript: With `<>`, props is always `null` — so passing a `key` is simply not possible. This is not a syntax limitation, it's a consequence of compilation. ## Practical rule Trying to pass `key` to the short syntax results in an error: - Use `<>` for static grouping of elements where a key is not needed. - Always use `` inside `.map()` — the key is critical for React's reconciliation algorithm. Were you thinking about this before, or just using `<>` everywhere? 😅

Notes on web dev

The z-index War — and How to End It

Syntactic Sugar — Not Always a Sweet Life for Developers

React Fragments: <> or <React.Fragment>?

Subscribe to Yevhenii's Newsletter