# How to Use Airbnb Style Guide Destructuring Rules for Deeply Nested Objects

> Master Airbnb destructuring rules for deeply nested objects. Learn how to implement these essential JavaScript patterns to improve code readability and maintainability.

- Repository: [Airbnb/javascript](https://github.com/airbnb/javascript)
- Tags: how-to-guide
- Published: 2026-02-24

---

**Airbnb’s JavaScript style guide enforces destructuring via two ESLint rules—`react/destructuring-assignment` and `prefer-destructuring`—which require destructuring patterns for variable assignments but impose no limits on nesting depth.**

The `airbnb/javascript` repository defines one of the most widely adopted JavaScript style guides, with strict rules governing how developers extract values from objects and React component properties. When working with **Airbnb style guide destructuring** requirements, understanding how the configuration handles deeply nested object patterns ensures your code remains compliant and readable.

## Understanding Airbnb’s Core Destructuring ESLint Rules

The style guide enforces destructuring through two specific rule configurations that operate on **assignment expressions** and **variable declarators**.

### react/destructuring-assignment

Defined in [[`packages/eslint-config-airbnb/rules/react.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/rules/react.js)](https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb/rules/react.js#L445), this rule forces destructuring for `props`, `state`, and `context` access in React components. The configuration is set to `"always"`, meaning dot-notation access like `this.props.user` triggers a linting error.

### prefer-destructuring

Located in [[`packages/eslint-config-airbnb-base/rules/es6.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb-base/rules/es6.js)](https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/es6.js#L121), this rule encourages object destructuring for variable declarations. The configuration enables `VariableDeclarator.object: true` and `AssignmentExpression.object: false`, meaning object destructuring is preferred when declaring variables but not strictly enforced for reassignments.

## Destructuring Deeply Nested Objects

Neither rule restricts how deep your destructuring pattern can go. As long as the assignment itself uses destructuring syntax, arbitrarily deep nesting satisfies the linter.

```javascript
// ✅ Correct - single statement with deep nesting
const {
  user: {
    name,
    address: { city, zip }
  }
} = this.props;

```

The `react/destructuring-assignment` rule only verifies that `this.props` (or `this.state` / `this.context`) is destructured at the top level. The inner pattern can traverse any number of nested objects.

## Breaking Complex Patterns for Readability

For deeply nested data structures, splitting the destructuring into intermediate variables improves readability while maintaining compliance.

```javascript
// ✅ Correct - step-by-step destructuring
const { user } = this.props;
const { name, address: { city, zip } } = user;

```

Each line represents a valid destructuring assignment, satisfying both `react/destructuring-assignment` and `prefer-destructuring` rules.

## Avoiding Common Pitfalls

When applying **Airbnb style guide destructuring** to nested objects, watch for these violations:

- **Direct dot-notation access** on `this.props`, `this.state`, or `this.context` always fails the `react/destructuring-assignment` rule. Replace `this.props.user.name` with destructured variables.
- **Mixed access patterns** create confusion. After destructuring `const { user } = this.props`, use `user.name` rather than falling back to `this.props.user.name`.
- **Computed property names** prevent the rule from verifying destructuring. When accessing dynamic keys like `this.props[userKey].name`, extract the computed portion first:

```javascript
// ✅ Workaround for computed properties
const target = this.props[userKey];
const { name } = target;

```

## Recommended Patterns for Deep Nesting

Choose between concise one-liners or explicit intermediate variables based on nesting complexity.

**Single statement for clear hierarchies:**

```javascript
const {
  user: {
    profile: { avatar, bio },
    settings: { theme, notifications },
  },
} = this.props;

```

**Multiple statements for complex branching:**

```javascript
const { user } = this.props;
const { profile, settings } = user;
const { avatar, bio } = profile;
const { theme, notifications } = settings;

```

Both approaches comply with the rules defined in [`packages/eslint-config-airbnb/rules/react.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/rules/react.js) and [`packages/eslint-config-airbnb-base/rules/es6.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb-base/rules/es6.js).

## Summary

- **Airbnb style guide destructuring** requires the `react/destructuring-assignment` rule (always enforce) and `prefer-destructuring` rule (object preference) as configured in the ESLint packages.
- No nesting depth limits exist; you can destructure arbitrarily deep objects in a single statement or across multiple lines.
- Always destructure `this.props`, `this.state`, and `this.context` at the point of use rather than using dot-notation.
- Split complex patterns into intermediate variables to improve readability while maintaining compliance.
- Handle computed property names by extracting the dynamic reference first, then destructuring from that variable.

## Frequently Asked Questions

### Does Airbnb’s style guide limit how deep I can nest destructuring patterns?

No. The rules in [`packages/eslint-config-airbnb/rules/react.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/rules/react.js) and [`packages/eslint-config-airbnb-base/rules/es6.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb-base/rules/es6.js) only verify that destructuring syntax is used for the assignment. You can nest as deeply as needed, though breaking complex patterns into intermediate variables is recommended for readability.

### Why does `this.props.user.name` fail the Airbnb linter while `const { user } = this.props` followed by `user.name` passes?

The `react/destructuring-assignment` rule specifically targets the access pattern on `this.props`, `this.state`, and `this.context`. Direct dot-notation access on these objects violates the "always" setting. Once you destructure into a local variable like `user`, subsequent dot-notation access on that variable is permitted because it no longer targets the restricted React component properties.

### How do I handle dynamic or computed property names with Airbnb’s destructuring rules?

ESLint cannot verify destructuring when using computed keys like `this.props[userKey]`. Extract the computed value into an intermediate variable first, then destructure from that variable. This satisfies the `prefer-destructuring` rule while handling dynamic access safely.

### Are array destructuring rules as strict as object destructuring in the Airbnb guide?

No. The `prefer-destructuring` configuration in [`packages/eslint-config-airbnb-base/rules/es6.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb-base/rules/es6.js) sets `AssignmentExpression.array` to `false`, meaning array destructuring is not enforced for assignments. Object destructuring is preferred for variable declarations, but arrays offer more flexibility under the Airbnb configuration.