Props, State & Re-renders on Mobile

import { useCallback, useState } from "react";
import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
 
interface CounterProps {
  label: string;
  initialCount?: number;
}
 
export function Counter({ label, initialCount = 0 }: CounterProps) {
  const [count, setCount] = useState(initialCount);
 
  const increment = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);
 
  return (
    <View style={styles.row}>
      <Text style={styles.label}>{label}</Text>
      <Text style={styles.value}>{count}</Text>
      <Pressable onPress={increment} style={styles.button}>
        <Text style={styles.buttonText}>+1</Text>
      </Pressable>
    </View>
  );
}
 
const styles = StyleSheet.create({
  row: { flexDirection: "row", alignItems: "center", gap: 12, padding: 12 },
  label: { flex: 1, fontSize: 16 },
  value: { fontSize: 18, fontWeight: "700", minWidth: 32, textAlign: "right" },
  button: { backgroundColor: "#2563eb", paddingHorizontal: 14, paddingVertical: 8, borderRadius: 8 },
  buttonText: { color: "#fff", fontWeight: "600" },
});

import { memo, useCallback, useMemo, useState } from "react";
import {
  ActivityIndicator,
  FlatList,
  Pressable,
  StyleSheet,
  Text,
  View,
} from "react-native";
 
interface Todo {
  id: string;
  title: string;
  done: boolean;
}
 
interface TodoRowProps {
  item: Todo;
  onToggle: (id: string) => void;
}
 
const TodoRow = memo(function TodoRow({ item, onToggle }: TodoRowProps) {
  return (
    <Pressable
      onPress={() => onToggle(item.id)}
      style={[styles.row, item.done && styles.rowDone]}
    >
      <Text style={[styles.title, item.done && styles.titleDone]}>{item.title}</Text>
      <Text style={styles.badge}>{item.done ? "Done" : "Open"}</Text>
    </Pressable>
  );
});
 
const SEED: Todo[] = [
  { id: "1", title: "Profile layout with View + Text", done: true },
  { id: "2", title: "Wire Pressable handlers", done: false },
  { id: "3", title: "Measure list scroll perf", done: false },
];
 
export default function TodoScreen() {
  const [todos, setTodos] = useState<Todo[]>(SEED);
  const [filter, setFilter] = useState<"all" | "open">("all");
  const [loading, setLoading] = useState(false);
 
  const visible = useMemo(
    () => (filter === "open" ? todos.filter((t) => !t.done) : todos),
    [todos, filter]
  );
 
  const openCount = useMemo(() => todos.filter((t) => !t.done).length, [todos]);
 
  const handleToggle = useCallback((id: string) => {
    setTodos((prev) =>
      prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t))
    );
  }, []);
 
  const handleRefresh = useCallback(async () => {
    setLoading(true);
    await new Promise((r) => setTimeout(r, 400));
    setTodos(SEED);
    setLoading(false);
  }, []);
 
  return (
    <View style={styles.screen}>
      <View style={styles.header}>
        <Text style={styles.heading}>Todos ({openCount} open)</Text>
        <View style={styles.filters}>
          {(["all", "open"] as const).map((key) => (
            <Pressable
              key={key}
              onPress={() => setFilter(key)}
              style={[styles.chip, filter === key && styles.chipActive]}
            >
              <Text style={[styles.chipText, filter === key && styles.chipTextActive]}>
                {key === "all" ? "All" : "Open"}
              </Text>
            </Pressable>
          ))}
        </View>
      </View>
 
      {loading ? (
        <ActivityIndicator style={styles.loader} />
      ) : (
        <FlatList
          data={visible}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => <TodoRow item={item} onToggle={handleToggle} />}
          ItemSeparatorComponent={() => <View style={styles.separator} />}
          contentContainerStyle={styles.list}
        />
      )}
 
      <Pressable onPress={handleRefresh} style={styles.refresh}>
        <Text style={styles.refreshText}>Reset list</Text>
      </Pressable>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: "#f8fafc" },
  header: { padding: 16, gap: 12 },
  heading: { fontSize: 22, fontWeight: "700", color: "#0f172a" },
  filters: { flexDirection: "row", gap: 8 },
  chip: { paddingHorizontal: 12, paddingVertical: 6, borderRadius: 999, backgroundColor: "#e2e8f0" },
  chipActive: { backgroundColor: "#2563eb" },
  chipText: { fontSize: 14, fontWeight: "600", color: "#334155" },
  chipTextActive: { color: "#fff" },
  list: { paddingHorizontal: 16, paddingBottom: 24 },
  row: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#fff",
    padding: 14,
    borderRadius: 10,
    gap: 8,
  },
  rowDone: { opacity: 0.7 },
  title: { flex: 1, fontSize: 16, color: "#0f172a" },
  titleDone: { textDecorationLine: "line-through", color: "#64748b" },
  badge: { fontSize: 12, fontWeight: "600", color: "#2563eb" },
  separator: { height: 8 },
  loader: { marginTop: 32 },
  refresh: { margin: 16, padding: 14, borderRadius: 10, backgroundColor: "#0f172a" },
  refreshText: { color: "#fff", textAlign: "center", fontWeight: "600" },
});

import type { Dispatch, SetStateAction } from "react";
 
interface ScreenProps {
  userId: string;
  onSignOut: () => void;
}
 
// Tipo de setter explícito para callbacks que encaminham setState
type SetTodos = Dispatch<SetStateAction<Todo[]>>;
 
// Uniões discriminadas para UI assíncrona - evita estados impossíveis de loading+error
type LoadState =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "error"; message: string }
  | { status: "success"; data: Todo[] };