React Fragments and Keys Guide

Fragments and keys are essential React features for clean component structure and efficient rendering. Here's how to use them.

React Fragments#

import { Fragment } from 'react';

// Problem: Components must return single element
function BadComponent() {
  // Error: Adjacent JSX elements must be wrapped
  return (
    <h1>Title</h1>
    <p>Content</p>
  );
}

// Solution 1: Fragment syntax
function GoodComponent() {
  return (
    <Fragment>
      <h1>Title</h1>
      <p>Content</p>
    </Fragment>
  );
}

// Solution 2: Short syntax (preferred)
function BetterComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Content</p>
    </>
  );
}

Why Not Div Wrappers?#

// Using div creates extra DOM nodes
function TableRow({ items }) {
  return (
    <div>  {/* This breaks table structure */}
      <td>{items.name}</td>
      <td>{items.value}</td>
    </div>
  );
}

// Invalid HTML result:
// <table>
//   <tr>
//     <div>  <-- Invalid!
//       <td>...</td>
//     </div>
//   </tr>
// </table>

// Fragment solves this
function TableRow({ items }) {
  return (
    <>
      <td>{items.name}</td>
      <td>{items.value}</td>
    </>
  );
}

// Valid HTML result:
// <table>
//   <tr>
//     <td>...</td>
//     <td>...</td>
//   </tr>
// </table>

Fragments with Keys#

// Short syntax doesn't support keys
// Use Fragment when you need keys

function Glossary({ items }) {
  return (
    <dl>
      {items.map(item => (
        // Must use Fragment, not <>
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

// Another example
function Comments({ comments }) {
  return (
    <>
      {comments.map(comment => (
        <Fragment key={comment.id}>
          <Comment data={comment} />
          <Divider />
        </Fragment>
      ))}
    </>
  );
}

Understanding Keys#

// Keys help React identify which items changed
function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

// Keys should be:
// 1. Unique among siblings
// 2. Stable (don't change between renders)
// 3. Predictable (same input = same key)

Good vs Bad Keys#

// BAD: Using index as key
function BadList({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item.name}</li>
      ))}
    </ul>
  );
}
// Problems:
// - Reordering breaks state
// - Insertions at start break state
// - Deletions cause incorrect updates

// GOOD: Using unique ID
function GoodList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

// GOOD: Using composite key
function UserPosts({ users }) {
  return (
    <div>
      {users.map(user =>
        user.posts.map(post => (
          <Post key={`${user.id}-${post.id}`} post={post} />
        ))
      )}
    </div>
  );
}

When Index Keys Are Okay#

// Index keys are acceptable when:
// 1. List is static (never reordered)
// 2. Items have no stable IDs
// 3. List is never filtered/sorted

function StaticList() {
  const items = ['Apple', 'Banana', 'Cherry'];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

// But add unique keys for dynamic lists
let nextId = 0;

function DynamicList() {
  const [items, setItems] = useState([]);

  const addItem = (name) => {
    setItems([...items, { id: nextId++, name }]);
  };

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Key Behavior Demonstration#

// Without proper keys - state gets confused
function InputList() {
  const [items, setItems] = useState([
    { id: 1, text: 'First' },
    { id: 2, text: 'Second' },
  ]);

  const addToStart = () => {
    setItems([
      { id: Date.now(), text: 'New' },
      ...items
    ]);
  };

  return (
    <div>
      <button onClick={addToStart}>Add to Start</button>
      {items.map((item, index) => (
        // BAD: Using index - input values get mixed up
        <input key={index} defaultValue={item.text} />
      ))}
    </div>
  );
}

// With proper keys - state is preserved correctly
function CorrectInputList() {
  const [items, setItems] = useState([
    { id: 1, text: 'First' },
    { id: 2, text: 'Second' },
  ]);

  return (
    <div>
      {items.map(item => (
        // GOOD: Using unique ID
        <input key={item.id} defaultValue={item.text} />
      ))}
    </div>
  );
}

Resetting Components with Keys#

// Key change = component remount
function ProfilePage({ userId }) {
  // When userId changes, entire form resets
  return (
    <ProfileForm key={userId} userId={userId} />
  );
}

// Without key, form would keep old state
function ProfileFormWithoutKey({ userId }) {
  const [name, setName] = useState('');

  useEffect(() => {
    // Would need to manually reset
    fetchUser(userId).then(user => setName(user.name));
  }, [userId]);

  return <input value={name} onChange={e => setName(e.target.value)} />;
}

// With key, form resets automatically
function App() {
  const [selectedUserId, setSelectedUserId] = useState(1);

  return (
    <div>
      <UserList onSelect={setSelectedUserId} />
      <EditForm key={selectedUserId} userId={selectedUserId} />
    </div>
  );
}

Generating Keys#

// Using crypto.randomUUID (modern browsers)
function addItem(text) {
  const newItem = {
    id: crypto.randomUUID(),
    text
  };
  setItems([...items, newItem]);
}

// Using counter (simple approach)
let idCounter = 0;
function generateId() {
  return ++idCounter;
}

// Using nanoid library
import { nanoid } from 'nanoid';

function addItem(text) {
  setItems([...items, { id: nanoid(), text }]);
}

// From database
// Usually items from backend have IDs
const users = await fetchUsers();
// users already have user.id

Fragments in Conditional Rendering#

function ConditionalContent({ showExtra }) {
  return (
    <div>
      <h1>Main Content</h1>

      {showExtra && (
        <>
          <p>Extra paragraph one</p>
          <p>Extra paragraph two</p>
        </>
      )}

      <footer>Footer</footer>
    </div>
  );
}

// Multiple conditions
function StatusDisplay({ status }) {
  return (
    <div>
      {status === 'loading' && (
        <>
          <Spinner />
          <p>Loading...</p>
        </>
      )}

      {status === 'error' && (
        <>
          <ErrorIcon />
          <p>Something went wrong</p>
          <RetryButton />
        </>
      )}

      {status === 'success' && (
        <>
          <SuccessIcon />
          <p>Done!</p>
        </>
      )}
    </div>
  );
}

Nested Fragments#

function NestedStructure() {
  return (
    <>
      <Header />
      <>
        <Sidebar />
        <Main>
          <>
            <Article />
            <Comments />
          </>
        </Main>
      </>
      <Footer />
    </>
  );
}

// Usually better to use components
function BetterStructure() {
  return (
    <>
      <Header />
      <Layout>
        <Content />
      </Layout>
      <Footer />
    </>
  );
}

Common Patterns#

// Return array from render
function ReturnArray() {
  // Can return array with keys
  return [
    <li key="a">Item A</li>,
    <li key="b">Item B</li>,
    <li key="c">Item C</li>
  ];
}

// Map with fragment wrapper
function WrapperPattern({ items }) {
  return (
    <>
      {items.map(item => (
        <Fragment key={item.id}>
          <ListItem item={item} />
          {item.isLast || <Divider />}
        </Fragment>
      ))}
    </>
  );
}

// Fragment in higher-order component
function withWrapper(Component) {
  return function Wrapped(props) {
    return (
      <>
        <Component {...props} />
        <Analytics />
      </>
    );
  };
}

Best Practices#

Fragments:
✓ Use <> for simple grouping
✓ Use <Fragment> when keys needed
✓ Avoid unnecessary wrapper divs
✓ Keep DOM structure clean

Keys:
✓ Use unique, stable IDs
✓ Use database IDs when available
✓ Generate IDs at creation time
✓ Use key to force remount

Avoid:
✗ Index as key for dynamic lists
✗ Random keys on each render
✗ Non-unique keys among siblings
✗ Unnecessary Fragment nesting

Performance:
✓ Keys enable efficient diffing
✓ Stable keys prevent remounting
✓ Fragments reduce DOM nodes
✓ Proper keys preserve state

Fragments let you group elements without adding extra DOM nodes - use the short syntax <> when possible, and <Fragment> when you need keys. Keys help React efficiently update lists - always use unique, stable identifiers. Avoid index keys for dynamic lists, and remember that changing a key forces a component to remount, which can be useful for resetting state.