React ES6 Spread Operator
⚛️ React ES6 Spread Operator (...)
The spread operator (...) allows you to quickly copy or expand arrays and objects. It is widely used in React for updating state, passing props, combining arrays, and more.
🔹 Spread Operator with Arrays
Without Spread:
➡️ This copies the reference, not values.
With Spread:
Add Elements While Copying
🔹 Spread with Objects
Useful for cloning or updating objects.
Example:
🔥 Spread Operator in React State
React state must be updated immutably (without modifying the original value).
Spread operator helps do that.
Updating Array State:
Updating Object State:
🧩 Spread in React Props
Spread makes passing multiple props easier.
Without Spread:
With Spread:
✔ Shorter and dynamic!
🆚 Spread vs. Rest
| Feature | Example | Purpose |
|---|---|---|
Spread (...) |
[...arr] or {...obj} |
Expands values |
Rest (...) |
function fn(...args) |
Collects values |
✅ Summary
The spread operator is used in React to:
✔ Copy arrays and objects
✔ Add new data immutably
✔ Update React state
✔ Easily pass props
✔ Combine lists or objects
