Qual é a diferença entre props e state?

Question

Accepted Answer

Ambos armazenam dados que afetam o que um componente renderiza, mas diferem em **quem é dono dos dados** e **se eles podem mudar**. - **props** são passados *para dentro de* um componente a partir do seu componente pai. Eles são **somente leitura** — o componente nunca deve modificá-los. - **state** é possuído e gerenciado *dentro do* componente. Ele pode mudar ao longo do tempo, e mudá-lo dispara um **re-render**. ## Por que isso importa ```jsx // `step` is a PROP — given by the parent, the child only reads it. // `count` is STATE — owned here, changes on click, causes a re-render. function Counter({ step }) { const [count, setCount] = useState(0); return ( ); } // Parent decides the step and passes it down: ``` Os dados fluem **para baixo** (pai → filho via props) e as mudanças fluem **para cima** (filho pede ao pai para mudar algo via uma prop callback como `onChange`). Esse fluxo de mão única é o que torna os aplicativos React previsíveis. ## Como decidir qual usar - Vem de cima e o componente não deve mudá-lo → **prop**. - O componente deve mudá-lo ao longo do tempo → **state**. - Mutar props (`props.x = 1`) é um bug — React não fará re-render e você quebrou a propriedade do pai. Para "mudar uma prop", chame um callback que o pai lhe deu para que o pai atualize seu próprio state e passe um novo valor para baixo.