Destructuring extracts named properties from an object into variables. For example, `const { a, b } = { a: 1, b: 2, c: 3 };` creates `a` and `b` and leaves `c` unused. It is JavaScript syntax, not a React feature. section 4.1.2
Listing 4.3 MenuItem with argument destructuring
...
function MenuItem({ href, label }) { #1
return (
<li className="menu-item">
<a className="menu-link" href={href}> #2
{label} #2
</a>
</li>
);
}
...
A functional component can destructure its props directly in its parameter list. `MenuItem` then uses `href` and `label` without repeatedly writing `props.href` and `props.label`. section 4.1.2
The equivalent two-step form
`function MenuItem(props) { const { href, label } = props; /* use href and label */ }` extracts the same properties inside the function. Choose the parameter-list form when you want a shorter component definition. section 4.1.2
Destructuring also helps when converting a class component that reads `this.props.index` and `this.props.title` into a function that accepts `{ index, title }`. The resulting variables can be used directly in the returned JSX. section 4.4.1
Listing 4.8 Menu items with rest and spread
...
function MenuItem({ label, href, ...rest }) { #1
return (
<li className="menu-item">
<a className="menu-link" href={href} {...rest}> #2
{label}
</a>
</li>
);
}
...
Use `...rest` at the end of an object destructuring pattern to collect properties not named explicitly. Here, the remaining props are spread onto the link. Rest in destructuring and spread in JSX have different jobs. section 4.1.4
When defaults and rest appear together, put properties without defaults first, properties with defaults next, and rest last. Not every destructuring pattern uses an object: `useState` returns an array, so its value and setter use `[value, setter]`, not `{ value, set }`. section 4.1.4 section 5.2.3
