Hvordan fungerer props og state i React Native?

Question

Accepted Answer

**Props** og **state** er kjernekonspter i React som fungerer identisk i React Native: **props** sender data inn i en komponent (skrivebeskyttede inndata), mens **state** inneholder data som kan endres over tid (som utløser re-rendring). Å forstå dem er grunnleggende. ## Props — data som sendes inn (skrivebeskyttet) ```jsx // props are inputs passed to a component (from its parent) — READ-ONLY function UserCard({ name, age }) { // receives props return {name}, {age}; } // pass props when using the component // → props flow DOWN (parent → child); a component doesn't change its own props ``` ## State — data som endres (via useState) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // declare state + its setter return ( setCount(count + 1)}> {count} {/* uses state */} ); } // → calling setCount updates state → component RE-RENDERS with the new value ``` State er intern, endringsbar data; å oppdatere den (via setter fra `useState`) utløser en re-rendring — hvordan brukergrensesnittet reflekterer endringer. ## Props vs state ```text PROPS → passed IN from the parent; READ-ONLY (the component doesn't change them); for configuration/data from outside STATE → internal to the component; CHANGEABLE (via setState/useState); triggers re-renders; for data that changes over time (user input, toggles, fetched data) → Data flows DOWN via props; state changes drive UI updates. (Same as React for web.) ``` ## Hvorfor det betyr noe Å forstå props og state er grunnleggende for React Native fordi de er **kjernekonspter i React som er sentrale for hvordan komponenter fungerer og hvordan brukergrensesnitt oppdateres**, så det er kunnskapen man må ha. **Props** (skrivebeskyttede data som sendes inn i en komponent fra dens overordnede komponent, som flyter ned i komponenttreet) er hvordan komponenter mottar konfigurasjon og data fra utsiden, noe som gjør komponenter gjenbrukbare og sammensettbare. **State** (intern, endringsbar data som administreres via `useState`-kroken, der oppdatering av den utløser en re-rendring) er hvordan komponenter lagrer og reagerer på data som endres over tid (brukerinput, av/på-brytearer, hentet data) — mekanismen som gjør at brukergrensesnitt reflekterer endringer. Å forstå **forskjellen** — props sendes inn og er skrivebeskyttet (for ekstern data/konfigurasjon) kontra state som er intern og endringsbar (for data som endres, og driver re-rendring) — og prinsippet om at **data flyter ned via props mens state-endringer driver brukergrensesnittoppdateringer** er grunnleggende for å bygge React Native (og React) apper riktig. Disse er nøyaktig de samme konseptene som React for web, så forståelsen av dem overføres direkte og er viktig for alle som bygger React Native-komponenter. Å få props og state riktig (sende data via props, administrere endringsbar data med state, forstå den ensrettet dataflyt) er sentralt for funksjonelle, riktige komponenter. Fordi props og state er sentrale for hvordan React Native (og React) komponenter fungerer — mottar data (props) og administrerer endringer (state) for å drive brukergrensesnittoppdateringer — og å forstå dem er grunnleggende for å bygge en React Native app riktig, er det essensielt å forstå props og state, grunnleggende React Native-kunnskap — kjernekonspter som alle React Native-utviklere må forstå, identisk med web React (så kunnskapen overføres), og grunnleggende for å bygge komponenter som mottar data og reagerer på endringer, de grunnleggende mekanismene i React Native brukergrensesnittutvikling.