Jaka jest różnica między props a state?

Question

Accepted Answer

Obie przechowują dane wpływające na to, co komponent renderuje, ale różnią się **posiadaniem danych** i **możliwością ich zmiany**. - **props** są przekazywane *do* komponentu z jego komponentu nadrzędnego. Są **read-only** — komponent nigdy nie powinien ich modyfikować. - **state** jest posiadany i zarządzany *wewnątrz* komponentu. Może się zmieniać w czasie, a jego zmiana wyzwala **re-render**. ## Dlaczego to ważne ```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: ``` Dane płyną **w dół** (parent → child poprzez props) a zmiany płyną **w górę** (child prosi parenta o zmianę czegoś poprzez callback prop taki jak `onChange`). Ten jednokierunkowy przepływ to właśnie to, co czyni aplikacje React przewidywalnymi. ## Jak zdecydować, którego użyć - Pochodzi z góry i komponent nie powinien go zmieniać → **prop**. - Komponent musi go zmieniać w czasie → **state**. - Mutowanie props (`props.x = 1`) jest błędem — React nie będzie re-renderować i złamałeś posiadanie parenta. Aby "zmienić prop", wywołaj callback, który parent ci dał, aby parent zaktualizował swój własny state i przekazał nową wartość w dół.