Object and array destructuring

This book makes liberal use of destructuring techniques in an effort to keep the code base as concise as possible. As an example, object destructuring generally happens for function parameters:

const handleSelectBoxChange = ({ target: { value, name } }) => {
  ...
};

This is equivalent to saying this:

const handleSelectBoxChange = ({ target: { value, name } }) => {
  const target = event.target;
  const value = target.value;
  const name = target.name;
  ...
};

Return values can also be destructured in the same way. More frequently, you’ll see return values destructured. This happens with the useState hook:

const [customer, setCustomer] = useState({});

This is equivalent to:

const customerState = useState({});
const customer = customerState[0];
const setCustomer = customerState[1];