Destructuring state in React render

Question

I see a lot of examples that show a React component that looks like this:

class MyComponent extends Component {
   constructor(props) {
     super(props)

     this.state = {
       foo: 'foo',
       bar: 'bar'
     }
   }

   render() {
     const { foo, bar } = this.state

     return <Text>{foo}{bar}</Text>
   }
}

As you can see, the component's state has been destructured. I can see that the JSX looks cleaner, but it appears that it would be harder to know that a variables came from the components state. Is there any benefit of doing this in terms of best practices or is it just a preference?

Thanks.

Answer 1

Advantage: The code looks much cleaner especially if you need to reuse state values multiple times in a component.

Disadvantage: If you're making a module or open sourcing your code the destructed statement could cause confusions.