What is the difference between destructuring and the spread operator in React?

What is the difference between destructuring and the spread operator in React?

Destructuring allows you to unpack values from arrays or properties from objects into distinct variables. The spread operator, on the other hand, is used to expand elements of an iterable (like an array) or properties of an object into a new array or object.

Can you give me an example of destructuring in a React component?

Sure! Here's a simple example:

const MyComponent = ({ name, age }) => {
  return <div>{name} is {age} years old.</div>;
};

In this case, name and age are destructured from the props.

And how about the spread operator?

The spread operator can be used to pass props to a component like this:

const MyComponent = (props) => {
  return <div {...props} />;
};

This spreads all properties of props onto the div.

When should I use destructuring vs the spread operator?

Use destructuring when you want to extract specific values from an object or array. Use the spread operator when you want to create a new object or array by copying properties or elements from an existing one.