Destructuring Objects and Arrays in React

Destructuring a core concept in React (ES6 JavaScript) is widely used in props, useState and API data handling.

What is Destructuring?

Destructuring is a JavaScript feature that lets you extract values from objects and arrays into variables in a clean, short way

const user = { name: "Alxe", age: 30 };
const name = user.name;
const age = user.age;

You can write

const { name, age } = user;

1. Object Destructuring:

const user = {
  name: "Alex",
  age: 30,
  city: "San Francisco"
};

const { name, age } = user;

console.log(name); // Alex
console.log(age);  // 30

In React — the most common place we use Object destructuring

// Without destructuring
function Welcome(props) {
  return <h1>Hello {props.name}</h1>;
}

//with destructuring.
function Welcome({ name }) {
  return <h1>Hello {name}</h1>;
}

//Nested destructuring
const user = {
  name: "Alex",
  address: {
    city: "SF",
    zip: 94105
  }
};

const {
  address: { city }
} = user;

console.log(city); // SF 

2. Array Destructuring:

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

const [first, second] = colors;
console.log(first);  // red
console.log(second); // green

// Skipping values
const colors = ["red", "green", "blue"];
const [ , , third] = colors;
console.log(third); // blue

Using Rest Operator(…)

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

const [first, ...others] = colors;
console.log(others); // ["green", "blue"]

Destructuring in React userState (hook)

import { useState } from "react";

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

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

//Here the userState(0) returns an array of two elements (variable and function), we destructure it 
// count = to get the current state value
// setCount = function to update it

Combining Object and Array destructuring:

const users = [
  { name: "Ali", age: 25 },
  { name: "Alex", age: 30}
];

const [{ name: firstUser }] = users;

console.log(firstUser); // Ali

Summary:

• Object destructuring → { name, age }
• Array destructuring → [first, second]