Always destructure your component props in React.js

September 28, 2021 · React

While working with React.js components, there are two ways using which you can retrieve/access the component props.

The object destructuring way
Advantages

Here’s how the single “props” object approach would work.

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

As you can tell, here, the props object will hold all the props passed down to the <Welcome> component and these can be accessed through the dot notation like so.

The object destructuring way

The other way to access props is by using ES6’s object destructuring the “props” object in the function definition.

So, for example, if the <UserDetail> will have three props, you can specify in the component’s function signature like so.

function UserDetail({
    name,
    age,
    email
}) {
  return (
    <div>
        <p>Name: {name}</p>
        <p>Age: {age}</p>
        <p>Email: {email}</p>
    </div> 
  )
}

Advantages

My personal favorite is accessing props using this approach because it has some obvious benefits.

Since, all the props are being destructured right into the function definition, it’s easy to comprehend what all props are being used in the component by taking a high-level look over it.
Also, the code becomes much more readable since you don’t have to prepend props. every time you want to use a prop.
The third and most important benefit of this approach is, it is relatively easy to specify a default value for the prop. So, you can do something like this with it.

function UserPreference({
    canEdit = false
}) {
  if (canEdit) {  
    return (
        <div>
            <p>Update User Preferences here</p>
        </div>
    );
  }

  return (
    <div>
        <p>You are not allowed.</p>
    </div> 
  )
}

As you can tell, in this example, you can set the default value (false) for the canEdit prop which will be overridden by prop value when given to the component.

So, if the component is called without any prop like so…

<UserPreference/>

…The value of canEdit will be false.

This is not really feasible with the first approach.

I have gone through in detail about it in this post if you’re interested to learn.

And these are the exact reason why I think this should be the recommended convention when it comes to playing with props!

Previous: Custom thumbnails for native video element in HTML Next: Simple blinking cursor animation using CSS

» Share: Twitter, Facebook, Hacker News

Like this article? Consider leaving a

Tip

👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.

Become a Sponsor