Custom Hooks para Lógica de UI

import { useCallback, useEffect, useState } from "react";
import { Keyboard, TextInput, View, type KeyboardEvent } from "react-native";
 
export function useKeyboardHeight() {
  const [height, setHeight] = useState(0);
 
  useEffect(() => {
    const show = (e: KeyboardEvent) => setHeight(e.endCoordinates.height);
    const hide = () => setHeight(0);
 
    const showSub = Keyboard.addListener("keyboardDidShow", show);
    const hideSub = Keyboard.addListener("keyboardDidHide", hide);
 
    return () => {
      showSub.remove();
      hideSub.remove();
    };
  }, []);
 
  return height;
}
 
// Consumidor - sin prop drilling desde un padre
export function CommentComposer() {
  const keyboardHeight = useKeyboardHeight();
 
  return (
    <View style={{ paddingBottom: keyboardHeight }}>
      <TextInput placeholder="Añadir un comentario" />
    </View>
  );
}

import { useCallback, useMemo, useState } from "react";
import {
  FlatList,
  Pressable,
  StyleSheet,
  Text,
  TextInput,
  View,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
 
type Filter = "all" | "open" | "done";
 
interface Todo {
  id: string;
  title: string;
  done: boolean;
}
 
const SEED: Todo[] = [
  { id: "1", title: "Extraer hook de keyboard", done: true },
  { id: "2", title: "Conectar chips de filtro", done: false },
  { id: "3", title: "Entregar lista de presentación", done: false },
];
 
function useTodoFilters(initial: Todo[]) {
  const [query, setQuery] = useState("");
  const [filter, setFilter] = useState<Filter>("all");
 
  const visible = useMemo(() => {
    const normalized = query.trim().toLowerCase();
    return initial.filter((todo) => {
      const matchesFilter =
        filter === "all" ||
        (filter === "open" && !todo.done) ||
        (filter === "done" && todo.done);
      const matchesQuery =
        normalized.length === 0 ||
        todo.title.toLowerCase().includes(normalized);
      return matchesFilter && matchesQuery;
    });
  }, [initial, query, filter]);
 
  const counts = useMemo(
    () => ({
      all: initial.length,
      open: initial.filter((t) => !t.done).length,
      done: initial.filter((t) => t.done).length,
    }),
    [initial]
  );
 
  return {
    query,
    setQuery,
    filter,
    setFilter,
    visible,
    counts,
  };
}
 
function useDisclosure(initial = false) {
  const [isOpen, setIsOpen] = useState(initial);
 
  const open = useCallback(() => setIsOpen(true), []);
  const close = useCallback(() => setIsOpen(false), []);
  const toggle = useCallback(() => setIsOpen((v) => !v), []);
 
  return { isOpen, open, close, toggle };
}
 
interface TodoListProps {
  data: Todo[];
  onToggle: (id: string) => void;
}
 
function TodoList({ data, onToggle }: TodoListProps) {
  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <Pressable
          onPress={() => onToggle(item.id)}
          style={[styles.row, item.done && styles.rowDone]}
        >
          <Text style={styles.title}>{item.title}</Text>
          <Text style={styles.badge}>{item.done ? "Hecho" : "Abierto"}</Text>
        </Pressable>
      )}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
      contentContainerStyle={styles.list}
      keyboardShouldPersistTaps="handled"
    />
  );
}
 
export default function TodoScreen() {
  const insets = useSafeAreaInsets();
  const [todos, setTodos] = useState(SEED);
  const filters = useTodoFilters(todos);
  const search = useDisclosure(false);
 
  const handleToggle = useCallback((id: string) => {
    setTodos((prev) =>
      prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t))
    );
  }, []);
 
  return (
    <View style={[styles.screen, { paddingTop: insets.top }]}>
      <View style={styles.header}>
        <Text style={styles.heading}>Tareas</Text>
        <Pressable onPress={search.toggle} style={styles.iconButton}>
          <Text style={styles.iconButtonText}>{search.isOpen ? "✕" : "⌕"}</Text>
        </Pressable>
      </View>
 
      {search.isOpen ? (
        <TextInput
          autoFocus
          value={filters.query}
          onChangeText={filters.setQuery}
          placeholder="Buscar tareas"
          style={styles.search}
        />
      ) : null}
 
      <View style={styles.chips}>
        {(["all", "open", "done"] as const).map((key) => (
          <Pressable
            key={key}
            onPress={() => filters.setFilter(key)}
            style={[styles.chip, filters.filter === key && styles.chipActive]}
          >
            <Text
              style={[
                styles.chipText,
                filters.filter === key && styles.chipTextActive,
              ]}
            >
              {key} ({filters.counts[key]})
            </Text>
          </Pressable>
        ))}
      </View>
 
      <TodoList data={filters.visible} onToggle={handleToggle} />
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: "#f8fafc" },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  heading: { fontSize: 22, fontWeight: "700", color: "#0f172a" },
  iconButton: {
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: "#e2e8f0",
    alignItems: "center",
    justifyContent: "center",
  },
  iconButtonText: { fontSize: 16, fontWeight: "700", color: "#334155" },
  search: {
    marginHorizontal: 16,
    marginBottom: 8,
    padding: 12,
    borderRadius: 10,
    backgroundColor: "#fff",
    borderWidth: 1,
    borderColor: "#cbd5e1",
  },
  chips: { flexDirection: "row", gap: 8, paddingHorizontal: 16, marginBottom: 8 },
  chip: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 999,
    backgroundColor: "#e2e8f0",
  },
  chipActive: { backgroundColor: "#2563eb" },
  chipText: { fontSize: 13, 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" },
  badge: { fontSize: 12, fontWeight: "600", color: "#2563eb" },
  separator: { height: 8 },
});

// Prefiere referencias de acción estables dentro del hook
export function useCounter(initial = 0) {
  const [count, setCount] = useState(initial);
 
  const increment = useCallback(() => setCount((c) => c + 1), []);
  const reset = useCallback(() => setCount(initial), [initial]);
 
  return { count, increment, reset };
}

import type { Dispatch, SetStateAction } from "react";
 
interface UseTodoFiltersResult {
  query: string;
  setQuery: Dispatch<SetStateAction<string>>;
  filter: "all" | "open" | "done";
  setFilter: Dispatch<SetStateAction<"all" | "open" | "done">>;
  visible: Todo[];
  counts: Record<"all" | "open" | "done", number>;
}
 
// Hook genérico - preserva el tipo de elemento a través del pipeline
export function useDebouncedValue<T>(value: T, delayMs: number): T {
  const [debounced, setDebounced] = useState(value);
 
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delayMs);
    return () => clearTimeout(id);
  }, [value, delayMs]);
 
  return debounced;
}