Props são entradas passadas para um componente por seu pai (somente leitura do ponto de vista do filho). State é um dado que um componente possui e gerencia internamente (pode alterá-lo). A distinção: props vêm de fora e não mudam dentro do componente; state é interno e mutável.
() {
;
}
< name= />
Props fluem para baixo de pai para filho. O filho os lê, mas não pode alterá-los — para alterar o valor de uma prop, o pai deve passar uma nova.
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
}
State é criado e controlado dentro do componente; o componente o altera (via setCount/setState), e alterá-lo dispara uma re-renderização.
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
}
O state de um componente é frequentemente passado a um filho como uma prop. Elevar state para cima e passá-lo para baixo é exatamente esse padrão — o pai possui o state, os filhos o recebem como props.
A distinção entre state e props é fundamental para frameworks baseados em componentes.
Define a propriedade e o fluxo de dados: props é configuração externa, somente leitura (dados para baixo); state é dado interno e mutável que o componente gerencia.
Confundi-los — mutar props ou duplicar props em state — causa bugs clássicos.
Compreender que os dados fluem para baixo como props enquanto cada componente possui seu próprio state é a base do design de componentes React/Vue/Angular.