Los control props en React son un patrón de diseño que permite a un componente padre controlar el comportamiento de un componente hijo, manteniendo una comunicación bidireccional clara y predecible. Si trabajas con componentes reutilizables y quieres mejorar la gestión de estado entre padre e hijo, este patrón te resulta clave para construir interfaces flexibles y mantenibles.
¿Qué son los control props y para qué sirven?
El patrón consiste en que el componente hijo expone su estado interno mediante props, mientras que el padre decide qué hacer con esa información. El hijo notifica los cambios y el padre reacciona, lo que crea un flujo de datos controlado.
¿Qué es un control prop en React? Es una prop que permite al padre controlar el estado o comportamiento del hijo, normalmente combinando un valor (como isToggled) y una función de notificación (como onToggle).
Este enfoque te ayuda en tres frentes: gestión del estado clara, reutilización del componente en distintas partes de la app y mantenibilidad a largo plazo.
¿Cómo construir un Toggle con control props paso a paso?
El ejemplo práctico de la clase es un toggle que cambia entre on y off, donde el hijo guarda su estado interno pero le avisa al padre cada vez que cambia [01:00].
¿Cómo definir las props y el tipo en TypeScript?
El componente hijo recibe dos props opcionales que definen su contrato con el padre:
isToggled: valor booleano que indica el estado inicial.onToggle: función que recibe un boolean y retorna void, usada para notificar al padre.
En TypeScript se declara con un type llamado ToggleProps, marcando ambas propiedades como opcionales con el signo ?. Luego se tipa el componente como React.FunctionalComponent<ToggleProps> para asegurar la entrada y salida de datos [02:30].
tsx
type ToggleProps = {
isToggled?: boolean;
onToggle?: (value: boolean) => void;
};
¿Cómo manejar el estado interno y notificar al padre?
Dentro del hijo se crea un estado local con useState, inicializado con el valor que llega por prop:
tsx
const [internalToggle, setInternalToggle] = useState(isToggled);
Luego se define la función toggle, que invierte el valor actual, actualiza el estado interno y, si existe onToggle, la ejecuta pasándole el nuevo valor. Esa validación condicional evita errores cuando el padre no envía la función [04:30].
tsx
const toggle = () => {
const newToggle = !internalToggle;
setInternalToggle(newToggle);
if (onToggle) {
onToggle(newToggle);
}
};
El return renderiza un button con un onClick que dispara toggle, y muestra un texto condicional con un ternario: si internalToggle es true, aparece on con un emoji; si es false, aparece off.
¿Cómo conecta el padre con el hijo en este patrón?
El padre importa el componente Toggle y le pasa sus dos props. Para reflejar el cambio, también necesita su propio estado.
¿Por qué el padre también necesita estado si el hijo ya lo tiene? Porque así puede reaccionar al cambio, mostrar información derivada o sincronizar otros componentes de la interfaz.
El padre define toggleState con useState(false) y conecta las props así:
isToggled={toggleState} envía el valor actual al hijo.onToggle={setToggleState} permite que el hijo actualice directamente el estado del padre.
Además, el padre puede mostrar un párrafo con el mensaje toggle is seguido del valor actual, replicando el mismo ternario que usa el hijo. Al hacer clic en el botón, ambos componentes quedan sincronizados [07:00].
¿Por qué usar control props mejora la reutilización y mantenibilidad?
La comunicación queda acotada entre padre e hijo, sin propagarse de forma incontrolada por la aplicación. Esto significa tres ventajas concretas:
- Personalización total del hijo, que puede usarse en distintas pantallas con comportamientos distintos.
- Flexibilidad para que cada padre decida qué hacer con la notificación.
- Código más mantenible, porque el contrato de props documenta cómo se usa el componente.
Y aquí viene lo interesante: este mismo patrón aplica a inputs controlados, modals, dropdowns, tabs o cualquier elemento donde quieras delegar la decisión final al padre sin perder la lógica interna del hijo.
¿Qué otro componente se te ocurre construir con control props? Cuéntame en los comentarios cómo lo implementarías.
