ES6 for React — Destructuring, Arrow, Modules, Spread

ES6 for React — why it matters

Modern React code uses ES6+ JavaScript features every day. You will see them in every tutorial and every job interview.

The four most common in React are: destructuring, arrow functions, import/export modules, and the spread operator.

Real-life example: ES6 is like learning the local language before moving to a new city. You can survive without it, but daily life (React code) is much easier with it.

Destructuring

Destructuring pulls values out of objects and arrays into short variable names. React uses it for props, state, and hook return values.

Real-life example: Destructuring is like opening a lunch box and placing rice, dal, and roti on separate plates instead of eating straight from the box.

const user = { name: "Asha", age: 22, city: "Mumbai" };
const { name, age } = user;

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

// In React — props destructuring
function Profile({ name, age }) {
  return <p>{name} is {age}</p>;
}

Arrow Functions

Arrow functions are a short way to write functions. They are common for event handlers and small components.

Real-life example: Arrow functions are like text shortcuts on your phone — faster to type, same meaning as the long form.

// Classic function
function add(a, b) {
  return a + b;
}

// Arrow function
const addArrow = (a, b) => a + b;

// In React — click handler
<button onClick={() => setCount(count + 1)}>+1</button>

Modules — import and export

Each React file is a module. You export components and import them in other files. Default export = one main thing per file. Named export = many exports.

Real-life example: Modules are like separate chapters in a textbook. You open Chapter 3 (import) when you need a recipe from it.

// Button.jsx
export function Button({ label }) {
  return <button>{label}</button>;
}

// App.jsx
import { Button } from "./Button.jsx";

// Default export pattern
export default function App() {
  return <Button label="Join Rishtaara" />;
}

Spread Operator

The spread operator (...) copies arrays and objects. In React you use it to update state without mutating the old object.

Real-life example: Spread is like photocopying a form, writing one new answer on the copy, and keeping the original form unchanged.

const user = { name: "Ravi", score: 40 };

// Add/change one field — new object, old one untouched
const updated = { ...user, score: 55 };

const todos = ["Learn JSX", "Learn props"];
const more = [...todos, "Build project"];