React Fragments ਕੀ ਹਨ ਅਤੇ ਉਨ੍ਹਾਂ ਦੀ ਵਰਤੋਂ ਕਿਉਂ ਕਰੀ?

ਇੱਕ ਕਾਰਜ ਨੂੰ ਇੱਕ ਸਿੰਗਲ root element ਵਾਪਸ ਕਰਨਾ ਜ਼ਰੂਰੀ ਹੈ, ਪਰ ਤੁਸੀਂ ਅਕਸਰ ਸਿਰਫ ਉਸ ਨਿਯਮ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ ਇੱਕ ਵਾਧੂ wrapper <div> ਨਹੀਂ ਜੋੜਨਾ ਚਾਹੁੰਦੇ (ਇਹ CSS layouts ਜਿਵੇਂ fl/grid ਜਾਂ HTML structures ਜਿਵੇਂ tables ਨੂੰ ਤੋੜ ਸਕਦਾ ਹੈ)। ਇੱਕ Fragment ਬੱਚਿਆਂ ਨੂੰ ਗਰੁੱਪ ਕਰਦਾ ਹੈ ਬਿਨਾਂ ਕੋਈ DOM node ਸ਼ਾਮਲ ਕੀਤੇ।

function TableRow() {
  return (
    <>            {/* Fragment — produces NO extra element in the DOM */}
      <td>Name</td>
      <td>Email</td>
    </>
  );
}

ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਥਾਂ ਵਿੱਚ <div> ਵਰਤਦੇ, ਤੁਹਾਨੂੰ ਅਵੈਧ HTML ਮਿਲਦਾ (<tr><div><td>…), ਅਤੇ ਟੇਬਲ ਟੁੱਟ ਜਾਂਦਾ। Fragment ਸਿਰਫ ਦੋਵਾਂ <td>ਸ ਰੇਂਡਰ ਕਰਦਾ ਹੈ।

Short vs full syntax

<>...</>                       // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
  ...
</React.Fragment>

Fragment ਦੀ ਇੱਕ ਲਿਸਟ ਨੂੰ ਰੇਂਡਰ ਕਰਦੇ ਸਮੇਂ full form ਵਰਤੋ, ਕਿਉਂਕਿ short <> ਇੱਕ key ਨਹੀਂ ਲੈ ਸਕਦਾ:

{items.map(item => (
  <React.Fragment key={item.id}>
    <dt>{item.term}</dt>
    <dd>{item.def}</dd>
  </React.Fragment>
))}

ਇਹ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ

Fragments DOM ਨੂੰ ਸਾਫ ਰੱਖਦੇ ਹਨ (ਕੋਈ "wrapper div soup" ਨਹੀਂ), semantic/layout-sensitive structures ਨੂੰ ਤੋੜਨ ਤੋਂ ਬਚਾਉਂਦੇ ਹਨ, ਅਤੇ node ਦੀ ਗਿਣਤੀ ਨੂੰ ਥੋੜਾ ਘਟਾਉਂਦੇ ਹਨ – ਸਭ ਜ਼ੀਰੋ runtime cost ਨਾਲ।