CODEWITHSUNDEEP
reactjsreact-props
Phantom
Phantom

Reputation: 443

Different ways of destructuring props in react

I have seen two ways to destructure props in React.

    function MyComponent({name,age,height}){
            // do stuff here
    }

or

    function MyComponent(props){
            const {name,age,height} = props
            // do stuff here
    }

Suppose this component is used as

<MyComponent name="bob" age={25} height = {175} haspets={false}/>

Here is my questions:

If I used the first way of destructuring, does it mean that I will have no access to other props, in this case haspets

What are some pros/cons of these two ways?

Upvotes: 12

Views: 13798

Answers (2)

Michalis Garganourakis
Michalis Garganourakis

Reputation: 2930

You can have access on the other properties of your object later, throught the arguments object, though as also pointed out on the link the rest parameters should be prefered.

<MyComponent name="bob" age={25} height = {175} surname="test" haspets={false} />

function MyComponent({ name, age, height, ...rest }){
      // rest will be an object like { surname: 'test', haspets: false }
}

One of the differences I can think of, and I suppose the most important, is that on the second case, while you are destructing your props object, you are using const on declaration.

In that way, you can no longer change these values on your MyComponent, while on your first case you could easily modify them.

Upvotes: 9

tobiasfried
tobiasfried

Reputation: 1852

If you destructure your props from the function parameters, you won't be able to access any other props later on**, so your assumption is correct. As far as performance and other pros/cons though, these forms are pretty much identical. I happen to like this way, because I like as few additional variable declarations in my files as possible. It can, be a pain with functions that require lots of props.

**Unless you use the spread operator and store them in a separate variable.

Upvotes: 2

Related Questions