Components, Props and State

Components and props

A component is a function that returns UI. Props are inputs passed from a parent.

function Greeting({ name }) {
  return <Text>Hi, {name}!</Text>;
}

// usage
<Greeting name="Anand" />

State with useState

import { useState } from 'react';
import { Button, Text, View } from 'react-native';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Add" onPress={() => setCount(count + 1)} />
    </View>
  );
}

Rule: Never change state directly. Always use the setter (setCount) so React knows to re-render.