Spread and Rest Operators in React – Writing Concise and Readable Component Code

Introduction

In React, passing props between components can become verbose if done manually for each property. JavaScript’s spread and rest operators help simplify this process. They allow us to pass or extract multiple properties from objects in a clean and readable way.

Step 1: Passing Props Individually

Initially, we pass each property of an item manually from List to Item:

{list.map((item) => (
  
))}

This works, but it clutters the parent component.

Step 2: Using the Spread Operator

We can simplify the code using the spread operator {...item}:

{list.map((item) => (
  
))}

This spreads all key/value pairs of item as props into the Item component.

Step 3: Using the Rest Operator

To exclude objectID from the props (used only as a key), we use the rest operator:

{list.map(({ objectID, ...item }) => (
  
))}

Now objectID is separated, and the rest of the item is passed as props.

Destructuring Props in Components

In the Item component, we can destructure props directly in the function signature:

const Item = ({ title, url, author, num_comments, points }) => (
  

    {title}
    {author}
    {num_comments}
    {points}
  
);

Nested Destructuring (Optional)

For deeply nested objects, we can use nested destructuring:

const Item = ({
  item: {
    title,
    url,
    author,
    num_comments,
    points,
  },
}) => (...)

Use this only when it improves readability.

Conclusion

Spread and rest operators make React components cleaner and more expressive. Use the spread operator to pass all props at once, and the rest operator to exclude specific ones. Combine these with object destructuring to write elegant, maintainable code — especially in collaborative projects where clarity matters most.