Hvad er forskellen mellem props og state?

Question

Accepted Answer

Begge indeholder data, der påvirker det, som en komponent render, men de adskiller sig i **hvem der ejer dataene** og **om det kan ændres**. - **props** bliver gået *ind i* en komponent fra dens overordnede komponent. De er **skrivebeskyttede** — komponenten må aldrig ændre dem. - **state** ejes og styres *inden i* komponenten. Det kan ændres over tid, og ændring af det udløser et **re-render**. ## Eksempel ```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: ``` Data flyder **ned** (forælder → barn via props) og ændringer flyder **op** (barn beder forælderen om at ændre noget via en callback prop som `onChange`). Denne ensrettet flow er det, der gør React-apps forudsigelige. ## Hvordan man bestemmer hvilken man skal bruge - Kommer fra oven og komponenten burde ikke ændre den → **prop**. - Komponenten skal ændre den over tid → **state**. - At mutere props (`props.x = 1`) er en fejl — React vil ikke re-render og du har ødelagt forælderens ejerskab. For at "ændre en prop" skal du kalde en callback, som forælderen gav dig, så forælderen opdaterer sin egen state og sender en ny værdi ned.