🧩 Desestructuración de props en React para un código más limpio

🧩 Desestructuración de props en React para un código más limpio

La desestructuración de props permite extraer directamente los valores de los props dentro de la declaración de la función del componente. Esto hace el código más legible y evita escribir repetidamente props. para acceder a cada propiedad.

---

1️⃣ Props sin destructuración

Normalmente accedemos a los props mediante props.nombreProp:

function Profile(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Edad: {props.age}</p>
      <p>Ciudad: {props.city}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <Profile name="Jorge" age={30} city="Barcelona" />
);
  

Jorge
Edad: 30
Ciudad: Barcelona

---

2️⃣ Props con destructuración

Usando destructuración, podemos extraer los props directamente en los parámetros de la función:

function Profile({ name, age, city }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Edad: {age}</p>
      <p>Ciudad: {city}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <Profile name="Jorge" age={30} city="Barcelona" />
);
  

Jorge
Edad: 30
Ciudad: Barcelona

---

3️⃣ Ventajas de la destructuración

• ✅ Código más limpio y fácil de leer.
• ✅ Evita escribir repetidamente props..
• ✅ Facilita la identificación de los props que espera el componente.
• ✅ Ideal para componentes con muchos props.

---

4️⃣ Desestructuración dentro del cuerpo del componente

También se puede desestructurar dentro del cuerpo de la función si prefieres mantener los parámetros como props:

function Profile(props) {
  const { name, age, city } = props;
  return (
    <div>
      <h2>{name}</h2>
      <p>Edad: {age}</p>
      <p>Ciudad: {city}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <Profile name="Jorge" age={30} city="Barcelona" />
);
  

← Volver al índice