Destructure React Props with ES6 Object Destructuring for Cleaner Code

When you write a render function for a component in React, it takes in a props object containing the properties (“props”) that you’ll use to configure that component. Props make components reusable. To write cleaner code, you can destructure the props object into separate variables using ES6 object destructuring.

Using ES6 Object Destructuring in React

The React props object is made up of the properties (“props” for short) passed into a component by its parent component in React. Having props is what makes React components reusable and modular.

The props object is the sole argument to React’s render function (render(props)). You pass props from the parent component in the JSX:

Typically, we extract properties from props using the e>. syntax, as the props object is just a typical JavaScript object. For example, we might call props.name in a React function component or this.props.name in a React class component. There’s a better syntax, though: ES6 object destructuring.

“The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.” — MDN Docs

If you’ve tried using the useState hook (one of the React Hooks), then you’ve already seen the array destructuring syntax:

Object destructuring works similarly for objects, allowing you to extract their properties into variables with the same name:

While on first glance destructuring seems like a bit of a pointless trick (Who needs more variables?), I love to use props destructuring in my React code.

What’s the Advantage of Destructuring?

When working with props in React, your code can end up a mess of this.props.someProp and this.props.otherProp — making it hard to read and potentially more prone to simple typos as you’re developing.

“With destructuring assignment, the equivalent code becomes more concise and readable.” — Nick Fitzgerald and Jason Orendorff in the Mozilla Hacks blog

When instead of props.name (in a function component) or this.props.name (in a class component) we can just say name, then our code becomes a lot clearer to us and any other developers reading the code.

“Destructuring really shines in React apps, where it can greatly simplify how you write props.” — Lindsay Criswell on her Medium blog

It might not mean a lot, but you could easily type out this.props. hundreds of times in a React codebase. Instead, by using ES6 object destructuring on the props object, you can make your code much more straightforward.

Props Destructuring in a Function Component

Let’s take a look at a code example where we’re passing in a name and an emoji to a component that will display it.

Particularly when you’re using a prop repeatedly, you start to save a lot of typing when you can refer to {emoji} instead of {props.emoji}.

Here’s the same exact React function component without destructuring:

It’s not a big difference in such a small component, but in a React component with dozens of props, destructuring can be a big deal for readability.

Specifying the props explicitly with destructuring is also a reminder to yourself and other developers which props you are expecting — something that is very easy to lose track of when you never destructure the props.

Props Destructuring in a Class Component

I prefer using function components in React, but ES6 destructuring will work just the same in React class components.

Destructuring the props makes your code a lot more readable than sifting through dozens of this.props.someProp references in your code.

Props Destructuring in a Function’s Arguments

For even better readability, we can destructure the props object right in the render function’s arguments. Destructuring works the same way in a function declaration as it does with variable assignments.

That means you can destructure the props objects right in the arguments: render(props) becomes render({name, emoji}). If that doesn’t make a lot of sense to you, then Lindsay Criswell has a great post on her Medium blog explaining how to destructure props in the render function’s arguments.

Here’s the example of the same function component from before, but I moved the destructuring up into the arguments for the function.

In this example, I extract the name and emoji properties from props by using the destructuring syntax in the render function’s arguments.

A lot of developers prefer this syntax for destructuring React props — you never actually need to type the word props. 😂

Conclusion: Destructured React Props Are Better

Should you always destructure your props in React? Well, maybe not every time, but you should at least be familiar with the syntax to do so.

I think React components become a lot more readable with destructuring the props object, and I’m always an advocate for simple code.

Destructuring React props works great particularly when you’re passing around all of the props at the same time, as I covered in Coding at Dawn:

If you need the props object to pass on all of the props to a child component using the ... spread operator ({...props}), then you wouldn’t want to destructure props in the arguments to the function render(props).

Instead, you would want to destructure props at the top of the render function using the assignment syntax (with the e>= operator), leaving the props object intact for you to be able to pass it on to a child component.

Hopefully this has been helpful to you in understanding the usefulness of the ES6 object destructuring syntax when working with React props.

Happy coding! 💻 (☞ﾟヮﾟ)☞ 🤑

Dr. Derek Austin is the author of Career Programming: How You Can Become a Successful 6-Figure Programmer in 6 Months, now available on Amazon.