Destructuring Props in Functional Components

When you pass any props to any componenet, as in this example passing name and age as props to Profile component

<Profile name="John Doe" age={30} />

then you can use destructuring to directly extract name and age from the props object in the Profile component.

It makes the code cleaner and more readable by avoiding repetitive props.name and props.age references.

const Profile = ({ name, age }) => (
  <div>
    <h1>{name}</h1>
    <p>Age: {age}</p>
  </div>
);

You Might Also Like

Using useMemo for Caching and Optimizing Performance

~~`useMemo`~~ is a React Hook that helps optimize performance by memoizing (caching) the result of a...

Learn More
How to Use Error Boundaries to Handle Errors

## 1. Define an ErrorBoundary class component ``` class ErrorBoundary extends React.Component { //...

Learn More