What is destructuring in the context of React

Very simply its passing an object as an argument to the function, but the destructuring uses only the named properties of the object.

const destructuring = ({ used }) => console.log(used);

const properties = {
  unused: 1,
  used: 2,
};

destructuring(properties); // => 2

3. Another example of just saving me 4 characters while writing codes

say I have the below state

state = {
    items: [
    { value: 'Pants', id: uniqueId(), packed: false },
    { value: 'Jacket', id: uniqueId(), packed: false },
    ]
}

And now I have to render the state.items – so for that I have to do this.state.items – BUT with destructuring I can do the below inside render()

render() {
    const { items } = this.state;
    return (
        // codes
    )
}

So it saved me just 4 characters.

Benefits of destructuring – Shorter code

var object = { one: 1, two: 2, three: 3 }

let one = object.one;
let two = object.two;
let three = object.three;

console.log(one, two, three) // prints 1, 2, 3

Now with destructuring, the same code becomes much more clear and shorter

var object = { one: 1, two: 2, three: 3 }

let { once, tow, three } = object

console.log(one, two, three) // prints 1, 2, 3

Benefits of destructuring – Better readable code

Large components often suffer from this.props syndrome. That is to say, you see the phrase this.props all over the place, which unfortunately detracts from readability by acting as a source of extra noise. Take this example of a Product Price component which has a lot of props to render:

render() {
  return (
    <ProductPrice
      hidePriceFulfillmentDisplay=
       {this.props.hidePriceFulfillmentDisplay}
      primaryOffer={this.props.primaryOffer}
      productType={this.props.productType}
      productPageUrl={this.props.productPageUrl}
      inventory={this.props.inventory}
      submapType={this.props.submapType}
      ppu={this.props.ppu}
      isLoggedIn={this.props.isLoggedIn}
      gridView={this.props.isGridView}
    />
  );
}

After cutting down all these this.props noise. The below is much easier to read and clearly points out which props we are using in the component.

render() {
  const {
    hidePriceFulfillmentDisplay,
    primaryOffer,
    productType,
    productPageUrl,
    inventory,
    submapType,
    ppu,
    isLoggedIn,
    gridView
  } = this.props;

  return (
    <ProductPrice
      hidePriceFulfillmentDisplay={hidePriceFulfillmentDisplay}
      primaryOffer={primaryOffer}
      productType={productType}
      productPageUrl={productPageUrl}
      inventory={inventory}
      submapType={submapType}
      ppu={ppu}
      isLoggedIn={isLoggedIn}
      gridView={isGridView}
    />
  );
}

This makes sense to do in a large component where the same props might be used multiple times and in several subcomponents, but in this simple example we can use Spread Attributes for a super shortcut:

render() {
    const props = this.props;
    return ( <ProductPrice {...props} /> )
}

Stateless Functional Components (as mentioned earlier) make great use of Object Destructuring, since they receive props as an arg:

const ProductPrice = ({
  hidePriceFulfillmentDisplay,
  primaryOffer,
  productType,
  productPageUrl,
  inventory,
  submapType,
  ppu,
  isLoggedIn,
  gridView
}) =>
  <ProductPrice
    hidePriceFulfillmentDisplay={hidePriceFulfillmentDisplay}
    primaryOffer={primaryOffer}
    productType={productType}
    productPageUrl={productPageUrl}
    inventory={inventory}
    submapType={submapType}
    ppu={ppu}
    isLoggedIn={isLoggedIn}
    gridView={isGridView}
  />

The following sample code shows how to create a stateful component using ES6 syntax. It’s often the case that you have to access plenty of properties from your state or props in your component. Rather than assigning them to a variable one by one, you can use destructuring assignment.

App.jsx
import React from 'react';

class App extends React.Component {

   constructor(props) {
      super(props);

      this.state = {
         users: "Users from state...",
         counter: "Counter from state..."
      }
   }
   render() {
      return (
         <div>
            <h1>{this.state.header}</h1>
            <h2>{this.state.content}</h2>
         </div>
      );
   }
}
export default App;


// no destructuring way of assigning these variable down in the code
const users = this.state.users;
const counter = this.state.counter;

// destructuring way of assigning these variable down in the code
const { users, counter } = this.state;

That’s especially beneficial for functional stateless components, because they always receive the props object in their function signature. Often you will not use the props but its content, so you can destructure the content already in the function signature.

// no destructuring
function Greeting(props) {
  return <h1>{props.greeting}</h1>;
}

// destructuring
function Greeting({ greeting }) {
  return <h1>{greeting}</h1>;
}

Resources

1> https://hackernoon.com/understanding-the-destructuring-assignment-syntax-in-javascript-c3bf8e1e908a

 

To Get Daily Health Newsletter

We don’t spam! Read our privacy policy for more info.

Download Mobile Apps
Follow us on Social Media
© 2012 - 2025; All rights reserved by authors. Powered by Mediarx International LTD, a subsidiary company of Rx Foundation.
RxHarun
Logo