Two different ways of using props in React

I couldn’t find any good explanation regarding this.

So you can use props in the following ways,

1.

export default function AppHeader({ somethingImportant }) {
  return <div>{somethingImportant}</div>
  
}

or

2.

export default function AppHeader(props) {
  const { somethingImportant } = props

  return <div>{somethingImportant}</div>
  
}

I can’t quite tell the difference between the first way to use props in child component and the second way.

Does it have to with making components re-usuable in other parent components??

Thanks in advance guys!

>Solution :

they are almost the same but in approach number one when you use the AppHeader component your ide can hint to you that this component needs somethingImportant prop.(if you are using webStorm or phpStorm you can press ctl + space where you used the component and see this prop)