React question: passing props

In the guide solution for this one(and also in the previous step), they are passing props like below:

const List = props => {
  return <p>{props.tasks.join(", ")}</p>;

and accessing required prop with the dot notation.

I am learning react also via bunch of other courses, and I see more and more snippets when the props are passed like this:

const List = ({tasks}) => {
  { /* Change code below this line */ }
  return <p>{tasks.join(', ')}</p>
  { /* Change code above this line */ }

Of course, both of these are working and passing the tests, I just can’t figure out: is there any significant difference how exactly pass the props: with or without destructuring

1 Like

Not sure what the most significant difference would be, probably how it fails if you forget to pass the prop.

Other than that using destructuring is just cleaner I would say.

1 Like

I think it would fail the same way if you forget to pass the prop. The object props will always exist (or more accurately, the first parameter passed in will always be an object, even an empty one) so it’s just that “tasks” would be undefined in either case.

Personally, I think the second one is cleaner and easier to read. This is especially true if you have several props or they get used more than once. Also, you’re not exposing props so there isn’t a chance of accidentally mutating it (at least not at that level).

To me it just makes more sense. I don’t care what “props” is, I care what “tasks” is. Why not cut out the middleman.

The other advantage is that (fair or not) it makes you seem like a more sophisticated coder. If I were reviewing code in a hiring process, I’d much rather see the second one - in my experience most of the people that don’t use destructuring are the people that aren’t comfortable with it because they haven’t used it much, haven’t been exposed to it much. That wouldn’t be a good sign.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.