Reactjs: what is the benefit assigning props to const variables?

Question

I see the following practice in lot of examples, even with one prop as well:

render() {
  const { thisProp, thatProp } = this.props;

  return (
    <Component passedPropA={thisProp} passedPropB={thatProp} />
  );
}

What is the benefit of creating another copy of the same data? Why not just use the props like this?

render() {

  return (
    <Component passedPropA={this.props.thisProp} passedPropB={this.props.thatProp} />
  );
}

Answer 1

I think this question hits 2 points truly. One of using const for immutable variables and the other being destructuring.

To answer the question, const is used because its immutable, you shouldn't modify something passed down to you directly.

But the reason why you see this in well maintained code bases is for readability. You see exactly whats been passed down and whats used in the first line, as well as, where its used it much more clear and concise without called the entire path this.props.thisProp. What isn't shown here is some of the true power of this such as default values and aliases though which helps an immense amount in keeping code readable. Like:

const { thisProps : thisParentsProp = 'empty' } = this.props;