Props Destructuring

A cleaner way to read props using JavaScript destructuring.

Writing props. over and over can get tedious.

Most React developers use ES6 Object Destructuring directly in the function parameters to unpack the props they need.

Before:

function Profile(props) {
  return <p>{props.name} is a {props.role}</p>;
}

After:

function Profile({ name, role }) {
  return <p>{name} is a {role}</p>;
}

This makes the component’s required data instantly visible!