The destucturing assignment and spread syntax arrived in ES6 a while back. With a transpiler like babel, we can use these features to help us write clean and concise react components.

As an example, let’s take a generic Input stateless functional component that renders a label with an input. Below is the implementation without making use of destructure assignment or spread.

function Input(props) {
  return (
    <div className={props.wrapClass}>
      <label htmlFor={props.id} className={props.labelClass}>
        {props.label}
      </label>
      <input
        type={props.type}
        id={props.id}
        placeholder={props.placeholder}
        value={props.value}
        onChange={e => props.onchange(e.target.value)}
        className={props.inputClass}
      />
    </div>
  );
}

class App extends Component {
  state = {
    name: ""
  };
  render() {
    return (
      <div>
        <Input
          type="text"
          id="name"
          label="Name"
          placeholder="Enter your name"
          value={this.state.name}
          onchange={newValue => this.setState({ name: newValue })}
          labelClass="form-label"
          inputClass="form-input"
          wrapClass="form-input-wrap"
        />
        <p>Hello {this.state.name}</p>
      </div>
    );
  }
}

… and here is a screenshot of the rendered consumed component:

Spread

The Input component works well but we can start to clean this up by using the spread syntax.

Notice that we are just passing a lot the properties down to the standard html input.

<input
  type={props.type}  id={props.id}  placeholder={props.placeholder}  value={props.value}  onChange={e => props.onchange(e.target.value)}
  className={props.inputClass}
/>

The spread syntax allows us to just pass on these properties, removing a chunk of code:

function Input(props) {
  return (
    <div className={props.wrapClass}>
      <label htmlFor={props.id} className={props.labelClass}>
        {props.label}
      </label>
      <input
        {...props}        onChange={e => props.onchange(e.target.value)}
        className={props.inputClass}
      />
    </div>
  );
}

Nice!

Destructure

That’s a great start. We’ve reduced the amount of code and if there are any more props we want to pass through, we don’t have to write any code in our Input component.

However, let’s look at the rendered DOM:

Because we have passed through all the properties, we have unwanted labelclass, inputclass and wrapclass attributes on the input tag.

We can use the destructure assignment syntax to resolve this issue and clean the code up a little more.

On the first line we destructure the properties coming into our component into specific variables, collecting other properties in a rest variable. This means we no longer have to reference properties using props.propertyName - we can just use propertyName. Referencing and spreading the rest variable means that we are also no longer passing through all the properties passed into the component.

function Input({
  id,
  label,
  onchange,
  labelClass,
  inputClass,
  wrapClass,
  ...rest}) {
  return (
    <div className={wrapClass}>
      <label htmlFor={id} className={labelClass}>
        {label}
      </label>
      <input
        id={id}
        {...rest}        onChange={e => onchange(e.target.value)}
        className={inputClass}
      />
    </div>
  );
}

Neat!

Class components

That’s great for stateless functional components, but what about class components? We can destructure the props and state as constants at the start of the render function so that we can reference those in the markup.

class SignUpForm extends Component {
  state = {
    email: "",
    password: ""
  };
  handleSubmit() {
    // Sign the user up ...
  }
  render() {
    const { title } = this.props;
    const { email, password } = this.state;
    return (
      <form onSubmit={this.handleSubmit}>
        <h2>{title}</h2>
        <Input
          type="email"
          id="email"
          label="email"
          placeholder="Enter your email"
          value={email}
          onchange={newValue => this.setState({ email: newValue })}
        />
        <Input
          type="password"
          id="password"
          label="password"
          placeholder="Enter a strong password"
          value={password}
          onchange={newValue => this.setState({ password: newValue })}
        />
        <button type="submit">Sign Up!</button>
      </form>
    );
  }
}

Nested object graph

That’s all cool, but what if we have a more complex object graph to destructure. So, something like the following:

state = {
  values: {
    email: "",
    password: ""
  },
  errors: {
    email: "",
    password: ""
  }
};

Our goal is to destructure into email, password, emailErr, passwordErr constants. As well as the nesting, we are going to have to deal with the name collisions of email and password during the destructuring.

The solution is pretty simple - just nest the constants in the appropriate structure and use aliases for the error constants:

const {
  values: { email, password },
  errors: { email: emailErr, password: passwordErr }
} = this.state;

Cool!

Conclusion

As we have seen, both the destructure assignment and the spread syntax allow us to write cleaner and more concise components. In addition, the ability to pass down a set of properties to sub components using the spread syntax means we don’t have to necessarily change components in the middle of our component tree when new properties are added to sub components.