Hva er forskjellen mellom state og props?

Question

Accepted Answer

**Props** er input som **sendes inn til** en komponent av dens forelder (skrivebeskyttet fra barnets perspektiv). **State** er data som en komponent **eier og administrerer internt** (den kan endre det). Skillet: props kommer fra utsiden og endres ikke innenfor komponenten; state er internt og endringsbart. ## Props — sendt inn, skrivebeskyttet ```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 flyter **ned** fra forelder til barn. Barnet leser dem men kan ikke endre dem — for å endre en props sin verdi, må forelderen sende en ny. ## State — eid internt, endringsbart ```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 opprettes og kontrolleres *innenfor* komponenten; komponenten endrer det (via `setCount`/`setState`), og å endre det utløser en re-render. ## Side-by-side ```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 ``` ## De fungerer sammen ```jsx function Parent() { const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent return ; // passed DOWN as a PROP } ``` En komponents **state** sendes ofte til et barn som en **prop**. Å løfte state opp og sende det ned er nettopp dette mønsteret — forelderen eier state, barn mottar det som props. ## Hvorfor det har betydning State-vs-props skillet er grunnleggende for komponentbaserte rammeverk. Det definerer data eierskap og flyt: props er ekstern, skrivebeskyttet konfigurasjon (data ned); state er intern, endringsbar data som komponenten administrerer. Å forveksle dem — endre props, eller duplisere props inn i state — forårsaker klassiske feil. Å forstå at data flyter ned som props mens hver komponent eier sin egen state, er grunnlaget for React/Vue/Angular komponentdesign.