Care este diferența dintre state și props?

Question

Accepted Answer

**Props** sunt intrări **transmise către** o componentă de către părintele acesteia (numai citire din perspectiva copilului). **State** sunt date pe care o componentă **le deține și le gestionează intern** (poate să le modifice). Diferența: props provin din exterior și nu se modifică în cadrul componentei; state este intern și mutabil. ## Props — transmise, numai citire ```jsx function Greeting({ name }) { // `name` is a prop from the parent return

Hello, {name}

; // name = "Bob"; // ❌ a child must NOT modify its props } // parent supplies the prop ``` Props curg **în jos** de la părinte la copil. Copilul le citește, dar nu le poate modifica — pentru a modifica valoarea unei prop, părintele trebuie să transmită una nouă. ## State — deținut intern, mutabil ```jsx function Counter() { const [count, setCount] = useState(0); // `count` is this component's own state return ; // the component updates its OWN state via setCount } ``` State este creat și controlat *în cadrul* componentei; componenta o modifică (prin `setCount`/`setState`), iar modificarea acesteia declanșează o re-redare. ## Alături ```text 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 ``` ## Funcționează împreună ```jsx function Parent() { const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent return ; // passed DOWN as a PROP } ``` State-ul unei componente este adesea transmis unui copil ca o **prop**. Ridicarea state-ului în sus și transmiterea sa în jos este exact acest model — părintele deține state-ul, copiii îl primesc ca props. ## De ce aceasta are importanță Distincția state vs props este fundamentală pentru framework-urile bazate pe componente. Definește proprietatea și fluxul datelor: props este configurație externă, numai citire (date în jos); state sunt date interne și mutabile pe care componenta le gestionează. Confundarea acestora — mutarea props, sau duplicarea props în state — provoacă bug-uri clasice. Înțelegerea că datele curg în jos ca props, în timp ce fiecare componentă deține propriul state, este baza designului componentelor React/Vue/Angular.