Destructuring, Spread & Rest Operators

Destructuring, spread syntax, and rest syntax are used constantly in React code. They make it easier to work with props, state objects, arrays, function parameters, and immutable updates.

1 Object Destructuring

Destructuring allows you to extract properties from an object into variables.

const user = {
    name: "Rahul",
    age: 30,
    role: "Developer"
};

const { name, age, role } = user;

console.log(name);
console.log(age);
console.log(role);

2 Destructuring Props

This is extremely common in React.

function UserCard({ name, role }) {
    return (
        <div>
            <h2>{name}</h2>
            <p>{role}</p>
        </div>
    );
}

Instead of:

function UserCard(props) {
    return (
        <div>
            <h2>{props.name}</h2>
            <p>{props.role}</p>
        </div>
    );
}

3 Array Destructuring

const colors = ["red", "green", "blue"];

const [first, second, third] = colors;

console.log(first);
console.log(second);
console.log(third);

The useState Hook itself is commonly used with array destructuring:

const [count, setCount] = useState(0);

4 Renaming During Destructuring

const user = {
    name: "Rahul"
};

const { name: userName } = user;

console.log(userName);

5 Default Values

const {
    name = "Guest"
} = user;

The default value is used when the property is undefined.

6 Spread Syntax

Spread syntax expands the elements of an iterable or the properties of an object into another structure.

Object Spread

const user = {
    name: "Rahul",
    role: "Developer"
};

const updatedUser = {
    ...user,
    role: "Architect"
};

This is one of the most important patterns for immutable React state updates.

7 Updating State Objects

const [user, setUser] = useState({
    name: "Rahul",
    age: 30
});

setUser(previous => ({
    ...previous,
    age: 31
}));

The spread operator copies the existing properties and the later age property replaces the old value.

8 Array Spread

const oldItems = ["A", "B"];

const newItems = [
    ...oldItems,
    "C"
];

console.log(newItems);
// ["A", "B", "C"]

9 Adding to React State Arrays

setItems(previous => [
    ...previous,
    newItem
]);

10 Removing from State Arrays

setItems(previous =>
    previous.filter(item => item.id !== id)
);

11 Rest Syntax

Rest syntax collects remaining values into an array or remaining object properties into an object.

Array Rest

const numbers = [1, 2, 3, 4];

const [first, ...remaining] = numbers;

console.log(first);
// 1

console.log(remaining);
// [2, 3, 4]

Object Rest

const user = {
    id: 1,
    name: "Rahul",
    password: "secret"
};

const {
    password,
    ...safeUser
} = user;

Now safeUser contains the remaining properties.

12 Rest Parameters in Functions

Rest syntax can collect function arguments into an array.

function sum(...numbers) {
    return numbers.reduce(
        (total, number) => total + number,
        0
    );
}

console.log(sum(10, 20, 30));
// 60

13 Spread vs Rest

Syntax	Main Idea	Example
Spread	Expand existing values	[...items]
Rest	Collect remaining values	[first, ...rest]

The syntax looks the same, but the meaning depends on where it is used.

14 React Data Flow

flowchart TD
A[Props Or State] --> B[Destructure Values]
B --> C[Use Values In Component]
C --> D[Create Updated Object Or Array]
D --> E[Spread Existing Data]
E --> F[Set New State]

15 Passing Props with Spread

const userProps = {
    name: "Rahul",
    role: "Developer"
};

<UserCard {...userProps} />

This passes the object's properties as individual props.

Use this carefully. Explicit props are often easier to read when only a few values are required.

16 Complete Example

function EmployeeForm() {
    const [employee, setEmployee] = useState({
        name: "",
        role: "",
        location: ""
    });

    function updateField(name, value) {
        setEmployee(previous => ({
            ...previous,
            [name]: value
        }));
    }

    const {
        name,
        role,
        location
    } = employee;

    return (
        <div>
            <input
                value={name}
                onChange={event =>
                    updateField(
                        "name",
                        event.target.value
                    )
                }
            />

            <input
                value={role}
                onChange={event =>
                    updateField(
                        "role",
                        event.target.value
                    )
                }
            />

            <input
                value={location}
                onChange={event =>
                    updateField(
                        "location",
                        event.target.value
                    )
                }
            />
        </div>
    );
}

17 Shallow Copy Important Point

Object and array spread creates a shallow copy. Nested objects are not automatically deep-cloned.

const user = {
    name: "Rahul",
    address: {
        city: "Bangalore"
    }
};

const copy = {
    ...user
};

The top-level object is copied, but copy.address still references the same nested object.

18 Common Mistakes

• Confusing spread and rest.
• Assuming spread performs a deep clone.
• Mutating nested state directly.
• Spreading props without understanding which values are being passed.
• Using object spread in the wrong order and accidentally overwriting a value.

19 Interview Questions

1. What is object destructuring?
2. How does array destructuring work?
3. What is the difference between spread and rest?
4. How is spread used for React state updates?
5. Does object spread perform a deep copy?
6. How do you remove a property using destructuring and rest?
7. How can you pass an object as multiple props?

20 Key Takeaways

• Destructuring extracts values from objects and arrays.
• Spread expands existing values into a new object or array.
• Rest collects remaining values.
• Spread is heavily used for immutable React state updates.
• Spread creates shallow copies, not deep copies.

Conclusion

React code becomes much cleaner when you are comfortable with destructuring, spread, and rest syntax. These features are especially important when handling props and updating objects or arrays without mutating existing state.