React 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.
Destructing Arrays
Here is the old way of assigning array items to a variable:
Example
Before:
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
With destructuring:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;
//You can now access each variable separately:
document.getElementById('demo').innerHTML = truck;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
Unpack the values from an object:
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
Unpack the values in a random order:
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// Destructuring
let {lastName, age, firstName} = person;You can extract only the value(s) you want:
Example
Extract only firstName from the object:
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// Destructuring
let {firstName} = person;For potentially missing properties we can set default values:
Example
Set a default value for the missing property:
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
Using destructuring to extract props:
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
Using destructuring to extract values from useState:
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 />
);
