ES6 Destructuring

Destructuring in React

Destructuring is a JavaScript feature that allows you to extract values from objects or arrays into distinct variables. In React, it's commonly used with props, hooks, and state management.

Note: Destructuring makes React code cleaner and more readable by reducing repetitive object and array access.

Destructuring Arrays

Here is the old way of assigning array items to a variable:

Example

const vehicles = ['mustang', 'f-150', 'expedition'];

// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];

//You can now access each variable separately:
document.getElementById('demo').innerHTML = truck;

Here is the new way of assigning array items to a variable:

Example

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car, truck, suv] = vehicles;

//You can now access each variable separately:
document.getElementById('demo').innerHTML = truck;

Note: When destructuring arrays, the order that variables are declared is important.

If we only want the car and suv we can simply leave out the truck but keep the comma:

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car,, suv] = vehicles;

Destructuring comes in handy when a function returns an array:

Example

function dateInfo(dat) {
  const d = dat.getDate();
  const m = dat.getMonth() + 1;
  const y = dat.getFullYear();

  return [d, m, y];
}

const [date, month, year] = dateInfo(new Date());

Destructuring Objects

You can use destructuring to extract the values from an object:

Example

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Destructuring
let {firstName, lastName, age} = person;

//You can now access each variable separately:
document.getElementById("demo").innerHTML = firstName;

For objects, the order of the properties does not matter:

Example

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Destructuring
let {lastName, age, firstName} = person;

You can extract only the value(s) you want:

Example

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Destructuring
let {firstName} = person;

For potentially missing properties we can set default values:

Example

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Destructuring
let {firstName, lastName, age, country = "Norway"} = person;

We can also destructure deeply nested objects by referencing the nested object then using a colon and curly braces to again destructure the items needed from the nested object:

Example

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  car: {
    brand: 'Ford',
    model: 'Mustang',
  }
};

// Destructuring
let {firstName, car: { brand, model }} = person;

let message = `My name is ${firstName}, and I drive a ${brand} ${model}.`;

Read more about Destructuring in our JavaScript Tutorial.

Destructuring in React Components

Destructuring is particularly useful in React for working with props, hooks, and API responses. It helps make your code more concise and easier to read.

Props Destructuring

When a component receives props, you can use destructuring to extract the values you need.

Check out the difference between using and not using destructuring:

//Using destructuring:
function Greeting({ name, age }) {
  return <h1>Hello, {name}! You are {age} years old.</h1>;
}

//NOT using destructuring:
function Greeting(props) {
  return <h1>Hello, {props.name}! You are {props.age} years old.</h1>;
}

Let's see a working example:

Example

import { createRoot } from 'react-dom/client'

function Greeting({ name, age }) {
  return <h1>Hello, {name}! You are {age} years old.</h1>;
}

createRoot(document.getElementById('root')).render(
  <Greeting name="John" age={25} />
);

useState Hook Destructuring

When a component uses the useState hook, we use destructuring to extract the values from it.

Example

import { createRoot, useState } from 'react-dom/client'

function Counter() {
  // Destructuring the array returned by useState
  const [count, setCount] = useState(0);

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

createRoot(document.getElementById('root')).render(
  <Counter />
);