How do I use object destructuring in React?

How do I use object destructuring in React?

Object destructuring in React allows you to extract values from objects and assign them to variables. For example, if you have a props object, you can do this: const { name, age } = props;.

Can you give me an example of how it's used in a functional component?

Sure! Here's a simple example:

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

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

What if I want to set default values?

You can set default values like this:

const UserProfile = ({ name = 'Guest', age = 18 }) => {
  return <div>{name} is {age} years old.</div>;
};

This way, if name or age is not provided, it will default to 'Guest' and 18.

Are there any performance implications of using destructuring?

Generally, destructuring is quite efficient and doesn't have significant performance implications. It's more about code readability and maintainability.