Should I always write this.props when passing props?

Question

I am fetching props from redux store object user .

And when I pass it to my component children, I implement it like follows

render(){
 return(
  <Component 
     num={this.props.user.num}
     id={this.props.user.id}
     name={this.props.user.name}/>
 )
}

or should I extract my variables much earlier?

render(){
 const {num, id, name} = this.props.user;
 return(
  <Component 
     num={num}
     id={id}
     name={name}/>
 )
}

Which has better performance ?

NOTE: this.props.user is a large JSON , So I do not want to use like this

<Component {...this.props.user}/>

Answer 1

Your question has two questions.

The question in the title: "Should I always write this.props when passing props?"

There's no way to access the properties unless you write this.props.whatever . So in the beginning you need it. Then, if you wish to refactor it, so you don't have to type this.props.~ every time, you extract each desired property into a variable.

The question at the end of the question body: "Which has better performance ?"

I think they would perform just about the same, but in terms of space efficiency, you would be creating extra variables with the destructuring. But I don't think that would be very significant in your case. So, for the sake of readability and cleaner code, why not destructure?