Sebastian Gomez

Apr 12, 2023

Updated: Jun 24, 2026

Dominando React Props

React es una biblioteca de JavaScript usada en el desarrollo de aplicaciones de una sola página. La biblioteca se centra en la creación de componentes reutilizables que pueden renderizarse en diferentes partes de una aplicación.

En React, las props son uno de los conceptos más importantes que debemos entender. Las props son propiedades que se pasan a los componentes de React y se utilizan para controlar su comportamiento.

Vigente en React 19 / Next.js 16: Los conceptos de este post (pasar props como atributos, acceder a ellas, desestructurarlas, valores por defecto y la diferencia entre props y state) siguen plenamente vigentes. El único cambio importante respecto a 2023 es cómo se establecen los valores por defecto: ya no se usa defaultProps en componentes de función. Más abajo lo explicamos con el patrón moderno.

Entendiendo las props en React

Las props son una forma de pasar datos de un componente a otro en React. Se utilizan para controlar el comportamiento de los componentes y para personalizar su apariencia. Las props son inmutables, lo que significa que, por convención, una vez que se han pasado a un componente, este no debe cambiarlas. No es una restricción que el lenguaje imponga por la fuerza, sino un contrato que respetamos para que la aplicación sea predecible.

Las props se pueden pasar a los componentes como atributos en la declaración del componente. Por ejemplo, si queremos pasar una prop llamada "nombre" a un componente llamado "Persona", podemos hacerlo así:

<Persona nombre="Juan" />

En este ejemplo estamos pasando la prop "nombre" con el valor "Juan" al componente "Persona". El componente "Persona" puede acceder a esa prop mediante props.nombre.

Ventajas de usar props en componentes React

Las props tienen varias ventajas en los componentes de React:

• Permiten una mayor modularidad en el código. Los componentes se pueden dividir en piezas más pequeñas y reutilizables que se combinan para crear componentes más grandes y complejos.
• Hacen que el código sea más fácil de mantener. Al pasar datos a través de props, los componentes pueden ser más independientes y menos propensos a errores.
• Hacen que el código sea más fácil de entender. Al utilizar props para pasar datos entre componentes, es más fácil entender cómo se comporta la aplicación en su conjunto.

Dos formas de pensar las props

En la práctica, conviene distinguir dos grupos de props, aunque técnicamente todas se pasan de la misma manera:

Las props que tú defines son las propiedades que decides para tus componentes. Por ejemplo, si tienes un componente "Botón" con una propiedad "texto", esa prop "texto" la inventas tú y le das el significado que quieras.

Las props que React reenvía a los elementos del DOM son props normales que pasas de forma explícita a etiquetas como <div>, <p> o <button>, y que React traduce a atributos reales del DOM. Por ejemplo, className (que React mapea al atributo class del DOM), style o los manejadores de eventos como onClick. Es importante aclarar algo: estas props no son "automáticas" ni una categoría especial gestionada por React, las pasas tú explícitamente igual que cualquier otra.

// "texto" es una prop que tú defines; "className" y "onClick"
// son props que pasas de forma explícita y React reenvía al DOM.
function Boton({ texto }) {
  return (
    <button className="btn" onClick={() => alert('Hola')}>
      {texto}
    </button>
  );
}

Mejores prácticas para usar props en React

Para utilizar props de manera efectiva en React, conviene seguir algunas buenas prácticas:

• Las props deben ser lo más simples posible. Las props complejas pueden hacer que los componentes sean más difíciles de entender y mantener.
• Trata las props como inmutables. Un componente no debe modificar las props que recibe, así es más fácil entender cómo se comporta y se evitan errores.
• Documenta las props de tus componentes. Esto hace más fácil entender cómo se deben usar y qué valores se deben pasar.

Cómo pasar props a componentes hijos en React

En React, las props se pasan a los componentes hijos usando la sintaxis de llaves {}. Por ejemplo, si tenemos un componente "Padre" con un componente hijo "Hijo", podemos pasarle una prop así:

// Definición de la función Padre, que será un componente de React
function Padre() {
  // Retornamos el componente Hijo con una prop llamada "nombre" y el valor "Juan"
  return <Hijo nombre="Juan" />;
}

// Definición de la función Hijo, que recibe props como argumento
function Hijo(props) {
  // Retornamos un párrafo que muestra "Hola" seguido del valor de la prop "nombre"
  return <p>Hola {props.nombre}</p>;
}

En este ejemplo estamos pasando la prop "nombre" con el valor "Juan" al componente "Hijo". El componente "Hijo" puede acceder a esa prop mediante props.nombre.

Desestructuración de props en React

En React, las props se pueden desestructurar para acceder a valores específicos. Por ejemplo, si tenemos un componente "Persona" con las props "nombre" y "edad", podemos desestructurarlas así:

// Definición de la función Persona, que recibe props como argumento
function Persona(props) {
  // Con la sintaxis de desestructuración extraemos 'nombre' y 'edad' de 'props'
  const { nombre, edad } = props;

  // Retornamos un párrafo que muestra el nombre y la edad usando interpolación
  return <p>{nombre} tiene {edad} años.</p>;
}

En este ejemplo estamos desestructurando las props "nombre" y "edad" para usarlas en el componente "Persona". Esto hace más fácil trabajar con las props y mantener el código legible.

Valores por defecto en las props con React 19

Muchas veces queremos que una prop tenga un valor por defecto cuando quien usa el componente no la proporciona.

Antes esto se hacía con la propiedad defaultProps sobre la función del componente. Importante: en React 19 ese enfoque ya no funciona en componentes de función. React 18.3 empezó a mostrar una advertencia y React 19 eliminó por completo el soporte de defaultProps en componentes de función. La forma recomendada hoy es usar parámetros por defecto de JavaScript directamente en la desestructuración:

// Definición de la función Botón, que recibe props como argumento.
// Si no se pasa "texto", se usa 'Enviar' por defecto.
function Boton({ texto = 'Enviar' }) {
  // Retornamos un botón que muestra el valor de la prop "texto"
  return <button>{texto}</button>;
}

En este ejemplo establecemos un valor por defecto de "Enviar" para la prop "texto". Si no se proporciona un valor para "texto", se usará ese valor por defecto. Este patrón es más simple, vive junto a la firma del componente y es la práctica vigente en React 19.

Props vs. State en React

En React, las props y el state son dos conceptos diferentes que se utilizan para controlar el comportamiento de los componentes.

Las props se usan para pasar datos de un componente a otro y un componente no debe modificarlas. El state se usa para almacenar datos que pueden cambiar a lo largo del tiempo y que sí son mutables dentro del componente.

En general, se recomienda usar props para pasar datos entre componentes y state para controlar el comportamiento de un componente en particular.

Depuración de props en React

En React, depurar las props puede ser una tarea difícil, ya que se pasan a través de múltiples componentes de la aplicación.

Para depurar las props, podemos usar herramientas como React Developer Tools, que siguen siendo la opción recomendada. Estas herramientas permiten inspeccionar las props que se están pasando a los componentes y entender cómo se comporta la aplicación en su conjunto.

Conclusión

Las props son un concepto importante en React que permite crear componentes reutilizables y personalizables. Al seguir las buenas prácticas y entender cómo trabajar con props, podemos crear aplicaciones más robustas y fáciles de mantener.

10 ejercicios para practicar con props

Ahora que sabes cómo funcionan las props en React, aquí tienes 10 ejercicios para practicar:

1. Crea un componente "Bienvenida" que se renderice con una prop "mensaje".
2. Crea un componente "Cabecera" que se renderice con dos props: "título" y "subtítulo".
3. Crea un componente "Botón" que se renderice con una prop "texto". Establece un valor por defecto de "Enviar" para esa prop usando un parámetro por defecto en la desestructuración.
4. Crea un componente "Lista" que se renderice con una prop llamada "items", que es un array de cadenas. Renderiza cada elemento del array como un elemento <li>.
5. Crea un componente "Imagen" que se renderice con dos props: "url" y "alt".
6. Crea un componente "Formulario" que se renderice con tres props: "título", "subtítulo" y "botón".
7. Crea un componente "Contador" que se renderice con una prop llamada "valorInicial". El valor por defecto de esta prop debe ser 0. Añade un botón para aumentar el contador.
8. Crea un componente que reciba dos props: "nombre" y "apellido". Renderiza los valores juntos como el nombre completo.
9. Crea un componente que reciba como prop un array de objetos, cada objeto representando a una persona con los campos nombre, apellido y edad. Renderiza cada persona en una tabla.
10. Crea un componente que reciba como prop un objeto con los campos nombre, apellido y edad. Renderiza los valores en un elemento <p>.

Resumen en 3 puntos

1. Las props son inmutables por convención y se usan para pasar datos entre componentes, mientras que el state es mutable y se usa para controlar el comportamiento de un componente en particular.
2. Depurar props en React puede ser complicado, pero herramientas como React Developer Tools ayudan a inspeccionar las props y entender el comportamiento de la aplicación.
3. En React 19 los valores por defecto se establecen con parámetros por defecto en la desestructuración (function Botón({ texto = 'Enviar' })), ya no con defaultProps.

Con estos ejercicios y el conocimiento adquirido sobre props en React, estarás bien encaminado para dominar este concepto clave. Sigue practicando y experimentando con props para mejorar tus habilidades como desarrollador.

Eso es todo, espero que este post te sea de utilidad y lo puedas aplicar a algún proyecto que tengas en mente. Si quieres seguir profundizando, échale un vistazo a mis otros posts sobre React y Next.js.

Déjame un comentario si te sirvió, si quieres añadir alguna opinión o si tienes alguna duda. Y recuerda que si te gustó, también puedes compartirlo usando los links a las redes sociales aquí abajo. Buena suerte.