React Arrays & Lists Interview Questions 2026

📖 Introduction

This comprehensive guide focuses on React Arrays & Lists interview questions covering dynamic data rendering. Whether you're preparing for your first React.js interview or looking to refresh your knowledge, this resource provides detailed answers with code examples to help you succeed.

What you'll learn:

List Rendering: Using map() to render dynamic lists
Keys: Understanding the importance of keys in React lists
Filtering & Sorting: Dynamic list manipulation
Performance: Optimizing large lists with virtualization
Nested Lists: Rendering complex nested data structures
List Updates: Adding, removing, and updating list items

Perfect for:

Developers preparing for React.js interviews focusing on data rendering
Frontend engineers looking to master list handling in React
Teams conducting React technical assessments
Anyone learning React and seeking comprehensive interview preparation

Keywords: React Arrays & Lists interview questions, React JS interview questions, React.js interview questions, interview questions on react js Key Features:

10+ React Arrays & Lists interview questions with detailed explanations
Code examples for every concept
Updated for 2026 with latest React features
Covers all difficulty levels from beginner to advanced
Practical answers you can use in real interviews

React Arrays & Lists

How do you render a list of items in React?
In React, lists are usually rendered using JavaScript's .map() method. Each list item should also have a unique key prop so React can efficiently track and update elements.
```
const fruits = ["Apple", "Banana", "Mango"]
return (
  <ul>
    {fruits.map((fruit, index) => (
      <li key={index}>{fruit}</li>
    ))}
  </ul>
)
```
In this example, .map() is used to iterate over the array, and the key prop helps React identify each list item uniquely.
Why is the key prop important in React lists?
The key prop is important because it helps React efficiently manage list rendering. It allows React to identify which items have changed, been added, or removed, instead of re-rendering the entire list.
- Helps React track elements and update only what's necessary.
- Prevents unnecessary re-renders, improving performance.
- Best practice: Use a unique ID as the key instead of the array index whenever possible.
```
{
  items.map((item) => <ListItem key={item.id} value={item.value} />)
}
```
What happens if we use the array index as a key in React?
Using the array index as keys can lead to performance issues and unexpected behavior, especially when reordering or deleting items. React relies on keys to identify elements uniquely, and using indices can cause components to be re-rendered unnecessarily or display incorrect data.
Problems with index keys:
- Can cause issues when list items are reordered
- May lead to incorrect updates if items are added or removed
- Safe only for static lists that never change

How do you conditionally render list items in React?

In React, list items can be conditionally rendered using techniques like if statements, ternary operators, or array methods such as .filter() combined with .map().

const users = [
  { name: "Aman", active: true },
  { name: "Raj", active: false },
]
return (
  <ul>
    {users
      .filter((user) => user.active)
      .map((user) => (
        <li key={user.name}>{user.name}</li>
      ))}
  </ul>
)

How do you update or remove an item from a list in React state?
State is immutable, so you cannot modify arrays directly. Instead, you create a new array using methods like .map() or .filter() and then update state with that new array.
Example (removing an item):
```
const [list, setList] = useState(["A", "B", "C"])

const removeItem = (item) => {
  setList(list.filter((i) => i !== item))
}
```
Example (updating an item):
```
const updateItem = (id, newValue) => {
  setList(list.map((item) => (item.id === id ? { ...item, value: newValue } : item)))
}
```
In these examples, .filter() and .map() create new arrays without the removed item or with the updated item, and setList updates the state.
What are some performance tips when rendering large lists in React?
Rendering very large lists can hurt performance, so React provides techniques and best practices to optimize them:
- Use unique keys so React can efficiently track items.
- Use virtualization libraries like react-window or react-virtualized to render only the visible portion of the list.
- Memoize list items with React.memo to prevent unnecessary re-renders.
- Implement pagination or lazy loading instead of rendering thousands of items at once.

How would you render a nested list in React?

You can nest .map() calls: one for the parent array and another for the child array.

const categories = [
  { name: "Fruits", items: ["Apple", "Banana"] },
  { name: "Veggies", items: ["Carrot", "Tomato"] },
]

return (
  <div>
    {categories.map((cat) => (
      <div key={cat.name}>
        <h3>{cat.name}</h3>
        <ul>
          {cat.items.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </div>
    ))}
  </div>
)

In this example, each level of data gets its own .map() loop, and both parent and child elements should have unique key props.

How do you handle dynamic addition of items in a list?
In React, since state is immutable, you cannot directly modify the existing array. Instead, you create a new array that includes the new item and update state.
```
const [list, setList] = useState(["A", "B"])

const addItem = (item) => {
  setList([...list, item])
}
```
In this example:
- [...list, item] creates a new array with the existing items plus the new one.
- Calling setList with this new array updates the state and triggers a re-render, showing the updated list in the UI.
How do you handle dynamic sorting or filtering of lists in React?
In React, lists are usually stored in state, and you can sort or filter them dynamically by creating a new array based on the original list and updating the state.
```
const [users, setUsers] = useState([
  { name: "Aman", age: 25 },
  { name: "Raj", age: 30 },
  { name: "Sara", age: 22 },
])

// Filter active users
const filteredUsers = users.filter((user) => user.age > 24)

// Sort by name
const sortedUsers = [...users].sort((a, b) => a.name.localeCompare(b.name))
```
In this example:
- filter creates a new array containing only the items that meet the condition.
- sort rearranges the array items; using [...users] ensures the original state is not mutated.
- Updating state with the new array triggers a re-render, displaying the sorted or filtered list in the UI.
What is the difference between rendering lists with map() vs forEach()?
When rendering lists, it's important to return JSX elements for each item. The choice between map() and forEach() affects this:
- map(): Returns a new array, which can contain JSX elements to be rendered. This is the preferred method for rendering lists in React.
- forEach(): Does not return a new array, so it cannot directly produce elements for rendering. It's only useful for side effects.
```
const fruits = ["Apple", "Banana", "Mango"];
return (
  <ul>
    {fruits.map(fruit => <li key={fruit}>{fruit}</li>)}
  </ul>
);
```
In this example:
- map returns an array of <li> elements, which React renders.
- Using forEach here would not work, because it does not return the array of elements.

Continue your React JS interview questions preparation with these related topics:

Core React Interview Questions

Master Core React interview questions covering JSX, Virtual DOM, Components, Props, State, and more. Essential React JS ...

React Hooks Interview Questions

Comprehensive React Hooks interview questions covering useState, useEffect, useCallback, useMemo, useReducer, and custom...

React Rendering & Performance Interview Questions

Comprehensive React Rendering & Performance interview questions covering Virtual DOM, memoization, code splitting, and o...

📖

Complete React Interview Guide

Master all aspects of React development

This article is part of our comprehensive React JS interview questions series covering all aspects of React development. Explore all topics:

Libraries & Integration

Miscellaneous

React Redux

Rendering & Performance

React Router

State Management

React Testing

Loading content...

📖 Introduction

What you'll learn:

List Rendering: Using map() to render dynamic lists

Keys: Understanding the importance of keys in React lists

Filtering & Sorting: Dynamic list manipulation

Performance: Optimizing large lists with virtualization

Nested Lists: Rendering complex nested data structures

List Updates: Adding, removing, and updating list items

Perfect for:

Developers preparing for React.js interviews focusing on data rendering

Frontend engineers looking to master list handling in React

Teams conducting React technical assessments

Anyone learning React and seeking comprehensive interview preparation

Keywords: React Arrays & Lists interview questions, React JS interview questions, React.js interview questions, interview questions on react js Key Features:

10+ React Arrays & Lists interview questions with detailed explanations

Code examples for every concept

Updated for 2026 with latest React features

Covers all difficulty levels from beginner to advanced

Practical answers you can use in real interviews

React Arrays & Lists

How do you render a list of items in React?

In React, lists are usually rendered using JavaScript's .map() method. Each list item should also have a unique key prop so React can efficiently track and update elements.

const fruits = ["Apple", "Banana", "Mango"]
return (
  <ul>
    {fruits.map((fruit, index) => (
      <li key={index}>{fruit}</li>
    ))}
  </ul>
)

In this example, .map() is used to iterate over the array, and the key prop helps React identify each list item uniquely.

Why is the `key` prop important in React lists?

The key prop is important because it helps React efficiently manage list rendering. It allows React to identify which items have changed, been added, or removed, instead of re-rendering the entire list.

Helps React track elements and update only what's necessary.
Prevents unnecessary re-renders, improving performance.
Best practice: Use a unique ID as the key instead of the array index whenever possible.

{
  items.map((item) => <ListItem key={item.id} value={item.value} />)
}

What happens if we use the array index as a key in React?

Using the array index as keys can lead to performance issues and unexpected behavior, especially when reordering or deleting items. React relies on keys to identify elements uniquely, and using indices can cause components to be re-rendered unnecessarily or display incorrect data.

Problems with index keys:

Can cause issues when list items are reordered
May lead to incorrect updates if items are added or removed
Safe only for static lists that never change

How do you conditionally render list items in React?

In React, list items can be conditionally rendered using techniques like if statements, ternary operators, or array methods such as .filter() combined with .map().

const users = [
  { name: "Aman", active: true },
  { name: "Raj", active: false },
]
return (
  <ul>
    {users
      .filter((user) => user.active)
      .map((user) => (
        <li key={user.name}>{user.name}</li>
      ))}
  </ul>
)

How do you update or remove an item from a list in React state?

State is immutable, so you cannot modify arrays directly. Instead, you create a new array using methods like .map() or .filter() and then update state with that new array.

Example (removing an item):

const [list, setList] = useState(["A", "B", "C"])

const removeItem = (item) => {
  setList(list.filter((i) => i !== item))
}

Example (updating an item):

const updateItem = (id, newValue) => {
  setList(list.map((item) => (item.id === id ? { ...item, value: newValue } : item)))
}

In these examples, .filter() and .map() create new arrays without the removed item or with the updated item, and setList updates the state.

What are some performance tips when rendering large lists in React?

Rendering very large lists can hurt performance, so React provides techniques and best practices to optimize them:

Use unique keys so React can efficiently track items.
Use virtualization libraries like react-window or react-virtualized to render only the visible portion of the list.
Memoize list items with React.memo to prevent unnecessary re-renders.
Implement pagination or lazy loading instead of rendering thousands of items at once.

How would you render a nested list in React?

You can nest .map() calls: one for the parent array and another for the child array.

const categories = [
  { name: "Fruits", items: ["Apple", "Banana"] },
  { name: "Veggies", items: ["Carrot", "Tomato"] },
]

return (
  <div>
    {categories.map((cat) => (
      <div key={cat.name}>
        <h3>{cat.name}</h3>
        <ul>
          {cat.items.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </div>
    ))}
  </div>
)

In this example, each level of data gets its own .map() loop, and both parent and child elements should have unique key props.

How do you handle dynamic addition of items in a list?

In React, since state is immutable, you cannot directly modify the existing array. Instead, you create a new array that includes the new item and update state.

const [list, setList] = useState(["A", "B"])

const addItem = (item) => {
  setList([...list, item])
}

In this example:

[...list, item] creates a new array with the existing items plus the new one.
Calling setList with this new array updates the state and triggers a re-render, showing the updated list in the UI.

How do you handle dynamic sorting or filtering of lists in React?

In React, lists are usually stored in state, and you can sort or filter them dynamically by creating a new array based on the original list and updating the state.

const [users, setUsers] = useState([
  { name: "Aman", age: 25 },
  { name: "Raj", age: 30 },
  { name: "Sara", age: 22 },
])

// Filter active users
const filteredUsers = users.filter((user) => user.age > 24)

// Sort by name
const sortedUsers = [...users].sort((a, b) => a.name.localeCompare(b.name))

In this example:

filter creates a new array containing only the items that meet the condition.
sort rearranges the array items; using [...users] ensures the original state is not mutated.
Updating state with the new array triggers a re-render, displaying the sorted or filtered list in the UI.

What is the difference between rendering lists with map() vs forEach()?

When rendering lists, it's important to return JSX elements for each item. The choice between map() and forEach() affects this:

map(): Returns a new array, which can contain JSX elements to be rendered. This is the preferred method for rendering lists in React.
forEach(): Does not return a new array, so it cannot directly produce elements for rendering. It's only useful for side effects.

const fruits = ["Apple", "Banana", "Mango"];
return (
  <ul>
    {fruits.map(fruit => <li key={fruit}>{fruit}</li>)}
  </ul>
);

In this example:

map returns an array of <li> elements, which React renders.
Using forEach here would not work, because it does not return the array of elements.

📚 Related React Interview Questions

Continue your React JS interview questions preparation with these related topics:

📖 Introduction

React Arrays & Lists

How do you render a list of items in React?

Why is the key prop important in React lists?

What happens if we use the array index as a key in React?

How do you conditionally render list items in React?

How do you update or remove an item from a list in React state?

What are some performance tips when rendering large lists in React?

How would you render a nested list in React?

How do you handle dynamic addition of items in a list?

How do you handle dynamic sorting or filtering of lists in React?

What is the difference between rendering lists with map() vs forEach()?

📚 Related React Interview Questions

Core React Interview Questions

React Hooks Interview Questions

React Rendering & Performance Interview Questions

Complete React Interview Guide

📖 Introduction

React Arrays & Lists

How do you render a list of items in React?

Why is the key prop important in React lists?

What happens if we use the array index as a key in React?

How do you conditionally render list items in React?

How do you update or remove an item from a list in React state?

What are some performance tips when rendering large lists in React?

How would you render a nested list in React?

How do you handle dynamic addition of items in a list?

How do you handle dynamic sorting or filtering of lists in React?

What is the difference between rendering lists with map() vs forEach()?

📚 Related React Interview Questions

Core React Interview Questions

React Hooks Interview Questions

React Rendering & Performance Interview Questions

Complete React Interview Guide

Why is the `key` prop important in React lists?

Why is the `key` prop important in React lists?