How do props and state work in a React Native component?

The React model is identical to the web. A parent passes props down, and a component renders based on those props plus its own state. State updates are asynchronous and batched, so you compute the next value from the previous one with a functional update when it depends on the old value.

import { useState } from "react";
import { Pressable, Text, View } from "react-native";

function Counter({ step }: { step: number }) {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>{count}</Text>
      <Pressable onPress={() => setCount((current) => current + step)}>
        <Text>Add {step}</Text>
      </Pressable>
    </View>
  );
}

Rules that keep data flow clear

• Never mutate props or state objects in place
• Keep state minimal and derive the rest during render
• Lift state to the closest common parent when siblings must agree
• Use a key to reset a component's state intentionally
• Prefer controlled inputs when validation and formatting depend on the value

A frequent mobile bug is storing derived data, such as a filtered list, in state and forgetting to update it when the source changes. Compute it with useMemo during render instead, unless the computation is genuinely expensive and the inputs are stable.