Props son entradas pasadas a un componente por su padre (de solo lectura desde la perspectiva del hijo). State son datos que un componente posee y administra internamente (puede cambiarlos). La distinción: props provienen de afuera y no cambian dentro del componente; state es interno y mutable.
() {
;
}
< name= />
Los props fluyen hacia abajo de padre a hijo. El hijo los lee pero no puede cambiarlos — para cambiar el valor de una prop, el padre debe pasar una nueva.
function Counter() {
const [count, setCount] = useState(0); // `count` is this component's own state
return <button onClick={() => setCount(count + 1)}>{count}</button>;
// the component updates its OWN state via setCount
}
El state se crea y controla dentro del componente; el componente lo cambia (mediante setCount/setState), y cambiarlo desencadena una re-renderización.
Props State
Source passed from parent created in the component
Mutable? read-only (in child) yes (via setter)
Who controls it the parent the component itself
Triggers render when the parent changes it when the component updates it
Purpose configure/pass data in track changing internal data
function Parent() {
const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent
return <Child name={user.name} />; // passed DOWN as a PROP
}
El state de un componente a menudo se pasa a un hijo como prop. Elevar el state y pasarlo hacia abajo es exactamente este patrón — el padre posee el state, los hijos lo reciben como props.
La distinción state-versus-props es fundamental para los frameworks basados en componentes.
Define la propiedad y el flujo de datos: los props son configuración externa de solo lectura (datos hacia abajo); state son datos internos y mutables que el componente administra.
Confundirlos — mutar props o duplicar props en state — causa errores clásicos.
Entender que los datos fluyen hacia abajo como props mientras cada componente posee su propio state es la base del diseño de componentes en React/Vue/Angular.