Hoe werken props en state in React Native?

Question

Accepted Answer

**Props** en **state** zijn kernconcepten van React die identiek werken in React Native: **props** geven gegevens aan een component door (alleen-lezen invoer), terwijl **state** gegevens bevat die in de loop der tijd kunnen veranderen (wat re-renders veroorzaakt). Dit begrijpen is fundamenteel. ## Props — doorgegeven gegevens (alleen-lezen) ```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 — gegevens die veranderen (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 is interne, veranderbare gegevens; het bijwerken ervan (via de setter van `useState`) veroorzaakt een re-render — hoe de UI veranderingen weerspiegelt. ## Props versus 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.) ``` ## Waarom het belangrijk is Begrip van props en state is fundamenteel voor React Native omdat het **kernconcepten van React zijn die centraal staan in hoe componenten werken en hoe UIs worden bijgewerkt**, dus het is onontbeerlijke kennis. **Props** (alleen-lezen gegevens die via de parent aan een component worden doorgegeven, stromend naar beneden in de componentboom) zijn hoe componenten configuratie en gegevens van buiten ontvangen, wat herbruikbare, samengestelde componenten mogelijk maakt. **State** (interne, veranderbare gegevens beheerd via de `useState`-hook, waarbij het bijwerken ervan een re-render veroorzaakt) is hoe componenten gegevens die in de loop der tijd veranderen (gebruikersinvoer, schakelaars, opgehaalde gegevens) vasthouden en erop reageren — het mechanisme waarmee UIs veranderingen weerspiegelen. Begrip van het **onderscheid** — props die doorgegeven en alleen-lezen zijn (voor externe gegevens/configuratie) versus state die intern en veranderbaar is (voor gegevens die veranderen, wat re-renders aandrijft) — en het principe dat **gegevens via props naar beneden stromen terwijl statewijzigingen UI-updates aandrijven** is fundamenteel voor het correct bouwen van React Native- (en React-) apps. Dit zijn exact dezelfde concepten als React voor web, dus het begrijpen ervan wordt direct overgedragen en is essentieel voor iedereen die React Native-componenten bouwt. Props en state correct toepassen (gegevens via props doorgeven, veranderende gegevens met state beheren, de unidirectionele gegevensstroom begrijpen) is kernzaak voor functionele, correcte componenten. Omdat props en state centraal staan in hoe React Native- (en React-) componenten werken — gegevens ontvangen (props) en verandering beheren (state) om UI-updates aan te drijven — en het begrijpen ervan fundamenteel is voor het correct bouwen van elke React Native-app, is het begrijpen van props en state essentiële, fundamentele React Native-kennis — kernconcepten die elke React Native-ontwikkelaar moet begrijpen, identiek aan web React (dus de kennis wordt overgedragen), en fundamenteel voor het bouwen van componenten die gegevens ontvangen en op verandering reageren, de basismechaniek van React Native UI-ontwikkeling.