State is how a screen remembers things.
Direct answer
useState returns a value and a setter. Calling the setter updates the value and re-renders the component. Never change state directly. Create new objects and arrays instead.
Example
import { useState } from "react";
import { View, Text, Button, TextInput } from "react-native";
export default function Counter() {
const [count, setCount] = useState(0);
const [name, setName] = useState("");
return (
<View style={{ padding: 16 }}>
<TextInput value={name} onChangeText={setName} placeholder="Your name" />
<Text>Hello {name}, count is {count}</Text>
<Button title="Add" onPress={() => setCount(count + 1)} />
</View>
);
}
Updating objects and arrays
const [todos, setTodos] = useState([]);
setTodos([...todos, { id: Date.now(), text: "New" }]); // add
setTodos(todos.filter((t) => t.id !== id)); // remove
setUser({ ...user, name: "Ada" }); // update field
Use the functional form when it depends on the previous value
setCount((c) => c + 1);
Where Teyro fits
Teyro's React Native for Beginners course turns this into short lessons you can play in a few minutes a day. It has 80 lessons, and you can start free.
The bottom line
State changes cause re-renders. Treat it as read-only.
