QReact · Interview preparation
When should you use React fragments?
A fragment groups sibling elements without adding an extra DOM wrapper.
The idea to remember.
A fragment groups sibling elements without adding an extra DOM wrapper. It keeps markup meaningful when a layout would otherwise gain an unnecessary div.
01Learn by doing
From first example to real project.
Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.
Basic: a stable list
01 / BEGINNERA stable ID lets React keep each row's identity.
const todos = [{ id: 1, text: 'Read docs' }, { id: 2, text: 'Build app' }];
function TodoList() {
return <ul>{todos.map(todo => <li key={todo.id}>{todo.text}</li>)}</ul>;
}Intermediate: intentional reset
02 / INTERMEDIATEChanging a key tells React this is a new form, so its local state resets.
function ProfileEditor({ person }) {
return <ProfileForm key={person.id} person={person} />;
}Real scenario: reorderable tasks
03 / REAL SCENARIOUse database IDs, not array positions, when tasks can move.
function TaskBoard({ tasks, onMove }) {
return tasks.map(task => (
<TaskCard key={task.id} task={task} onMove={() => onMove(task.id)} />
));
}02Check your understanding
Try it in your own words.
Explain when should you use React fragments without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.
Keep learning here.
Explore more in-depth guides, exercises and related interview questions in this library.
Browse React study guides ↗