CODEWITHSUNDEEP
javascriptreactjs
bavaza
bavaza

Reputation: 11057

Deconstructing vs dot notation in React applications

I've noticed that in many React.js examples, props are deconstructed before they are used in components. For example, the following is from React-Redux sample code:

class AsyncApp extends Component {
    ....
    componentDidMount() {
        const { dispatch, selectedSubreddit } = this.props // <-- destructuring
        dispatch(fetchPostsIfNeeded(selectedSubreddit))
    }
    ....
}

Isn't the code equivalent to the following? Is it just a matter of style?

componentDidMount() {
    this.props.dispatch(fetchPostsIfNeeded(this.props.selectedSubreddit))
}

Upvotes: 1

Views: 1455

Answers (1)

Davorin Ruševljan
Davorin Ruševljan

Reputation: 4392

Strictly speaking it is not equivalent, but both sequences yield same result in the end. And for many, example that uses destructuring is nicer to read. Theoretically, code with destructuring could be made very slightly faster, but I doubt there is any real life difference or that this is commonly taken into account when selecting between two styles.

Upvotes: 2

Related Questions