Props, State y Re-renderizados en Móvil

Q: ¿React 19 agrupa llamadas setState en móvil?

Sí - las actualizaciones de manejadores de eventos, setTimeout, resoluciones de fetch y eventos nativos se agrupan por defecto. Múltiples llamadas a setState en el mismo tick producen un renderizado. Usa flushSync solo cuando intencionalmente necesites una pintura sincrónica (raro en móvil).

Q: ¿Por qué mis filas de FlatList se re-renderizan cuando cambia el estado del padre?

El re-renderizado del padre recrea renderItem a menos que sea memoizado; la nueva identidad de función puede derrotar la memoización de fila. Context o props inestabilizados que fluyen hacia filas disparan actualizaciones de hijo. Solución con memo en la fila, manejadores estables de useCallback y extraData solo cuando sea necesario.

Q: ¿Cuál es la diferencia entre props y state?

Props son entradas de un padre - de solo lectura desde la perspectiva del hijo. State es propiedad del componente y actualizado a través de setState / useReducer. Cambiar props re-renderiza el hijo; cambiar state re-renderiza el propietario y típicamente descendientes.

Q: ¿Cuándo debo usar useRef en lugar de useState?

useRef almacena valores mutables que no deben disparar re-renderizados cuando se actualicen. Los temporizadores, manijas de suscripción y patrones de "callback más reciente" son casos móviles comunes. Si la interfaz debe reflejar el valor, usa useState.

Q: ¿Qué es extraData en FlatList?

FlatList es un PureComponent - puede saltar renderItem si la referencia de data no cambió. Pasa extraData={selectedId} cuando la apariencia de fila depende de estado fuera de data. No pases objetos de estado completo - pasa el primitivo o bandera mínima.

Cómo se propagan las actualizaciones en hilos nativos frente al tiempo de ejecución de JS.

Receta

Tarjeta de referencia rápida - lista para copiar y pegar.

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" },
});

Cuándo usarlo: Cualquier pantalla interactiva donde las props del padre configuren hijos y useState local maneje la interfaz que debe mantenerse sincronizada con vistas nativas.

Ejemplo Funcional

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 ? "Hecho" : "Abierto"}</Text>
    </Pressable>
  );
});
 
const SEED: Todo[] = [
  { id: "1", title: "Disposición de perfil con View + Text", done: true },
  { id: "2", title: "Conectar manejadores Pressable", done: false },
  { id: "3", title: "Medir rendimiento de desplazamiento en lista", 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}>Tareas ({openCount} abiertos)</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" ? "Todos" : "Abiertos"}
              </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}>Restablecer lista</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" },
});

Lo que esto demuestra:

Props (item, onToggle) fluyen hacia una fila memoizada mientras el estado (todos, filter) vive en la pantalla
Las actualizaciones de setState funcionales evitan cierres obsoletos al activar elementos
useMemo obtiene datos filtrados y cuenta abiertos sin re-renderizados extras de solo recompilación
useCallback mantiene handleToggle estable para que memo en TodoRow pueda saltar filas sin cambios
FlatList re-renderiza solo filas visibles - el estado padre aún dispara reconciliación para esas filas

Análisis Profundo

Cómo Funciona

Los componentes de función React son funciones - un re-renderizado llama la función nuevamente en el hilo de JavaScript (Hermes en Expo).
React compara el nuevo árbol de elementos contra el árbol de fibra anterior y programa actualizaciones.
El renderizador de React Native aplica cambios de props y disposición a vistas nativas en el hilo de UI (a través de Fabric en la Nueva Arquitectura).
useState y useReducer programan un re-renderizado cuando se ejecuta el actualizador; el valor devuelto es la instantánea del renderizado actual.
React 19 agrupa automáticamente múltiples llamadas a setState en manejadores de eventos, promesas y tiempos de espera en un renderizado.
Props son entradas de solo lectura del padre al hijo - los hijos solicitan cambios a través de callbacks.

Ruta de Actualización: JS a Nativo

Toque del usuario (hilo de UI)
  - evento enviado al hilo de JS
  - onPress / manejador se ejecuta
  - setState programa renderizado
  - función del componente se vuelve a ejecutar (JS)
  - React compara árbol virtual (JS)
  - Fabric confirma nodos de sombra cambiados
  - disposición nativa + pintura (hilo de UI)

El hilo de JS puede convertirse en un cuello de botella si cada fotograma ejecuta lógica pesada o renderiza árboles enormes.
El hilo de UI pierde fotogramas si la disposición es costosa o demasiadas vistas mutan por fotograma.
Reducir re-renderizados innecesarios reduce el trabajo de JS y reduce la comparación nativa.

Patrones de Estado en Móvil

Patrón	API	Nota móvil
Estado de interfaz local	`useState`	Campos de formulario, alternancias, estado abierto de hojas
Datos derivados	`useMemo`	Listas filtradas - más barato que almacenar estado duplicado
Manejadores estables	`useCallback`	Requerido para optimización de fila `memo`/`FlatList`
Referencias mutables	`useRef`	Temporizadores, manijas de animación - sin re-renderizado en cambio de `.current`
Estado de pantalla compartida	Context / store	Prefiere estado colocalizado hasta que múltiples pestañas lo necesiten
Datos del servidor	TanStack Query / `use`	Mantén el fetching fuera del renderizado; muestra esqueletos mientras está pendiente

Tabla de Decisión Props vs State

Situación	Usa props	Usa state
Valor propiedad del padre	✓
Valor cambia solo dentro del componente		✓
Componentes hermanos necesitan el mismo valor	Elevar al padre ✓
Valor de parámetros de navegación	Prop de ruta ✓	Copiar a state si es editable
Carga útil de API remota	Pasar después de fetch	Almacenar en caché de consulta

Notas de TypeScript

import type { Dispatch, SetStateAction } from "react";
 
interface ScreenProps {
  userId: string;
  onSignOut: () => void;
}
 
// Tipo de definidor explícito para callbacks que reenvían setState
type SetTodos = Dispatch<SetStateAction<Todo[]>>;
 
// Uniones discriminadas para interfaz asincrónica - evita estados imposibles de carga + error
type LoadState =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "error"; message: string }
  | { status: "success"; data: Todo[] };

Escribe props con interface o type; exporta props de fila cuando uses memo.
SetStateAction<T> cubre formas de valor y función de actualizador.
Estrecha ramas de renderizado con uniones discriminadas en lugar de múltiples booleanos no relacionados.

Errores Comunes

Callbacks en línea inestables en listas - onPress={() => toggle(item.id)} dentro de renderItem rompe memo en cada renderizado. Solución: Pasa id a una fila memoizada que llama un manejador de useCallback estable.
Almacenar datos derivados en estado - Mantener openTodos en estado junto a todos duplica actualizaciones y riesgo de divergencia. Solución: Obtén con useMemo de la fuente de verdad.
Mutar objetos de estado - todo.done = true luego setTodos(todos) puede saltar el re-renderizado porque la referencia no cambió. Solución: Devuelve nuevos objetos/arrays de actualizadores.
Asumir pintura nativa inmediata después de setState - JS termina el paso de renderizado antes de que native confirme; las ráfagas rápidas aún ponen en cola trabajo. Solución: Agrupa actualizaciones relacionadas; evita lecturas de disposición sincrónica después de cada tick.
Valor de Context recreado en cada renderizado - value={{ user, theme }} re-renderiza todos los consumidores. Solución: Memoriza el objeto de valor de context o divide contexts.
Sobre-memorizar todo - useMemo/useCallback tienen su propio costo y ruido. Solución: Perfila primero; optimiza filas de listas y cálculos puros pesados.
Leer estado justo después de setState - setCount(1); console.log(count) aún registra la instantánea antigua. Solución: Usa la forma de actualizador o useEffect clavado en el valor.

Alternativas

Alternativa	Usa cuando	No uses cuando
`useState` local	Interfaz de pantalla con alcance que no cruza rutas	Muchos primos distantes necesitan los mismos datos
React Context	Tema, sesión de auth, feature flags leídas ampliamente	Actualizaciones de alta frecuencia (posición de desplazamiento, pulsaciones de tecla)
Zustand / Jotai	Estado de aplicación mediano con boilerplate mínimo	Un callback padre-hijo es suficiente
TanStack Query	Listas de servidor, almacenamiento en caché, actualización de fondo	Toggle puramente local sin red
`useRef` para valores mutables	Fotogramas de animación, intervalos, manijas imperativas	Valores que deben aparecer en la pantalla
Entradas no controladas + ref	Formularios simples con pocos campos	Validación compleja entre pasos

FAQs

¿Qué sucede realmente cuando se llama setState en React Native?

React programa un re-renderizado del componente y sus descendientes (a menos que sea rechazado por memo).
La función del componente se ejecuta nuevamente en el hilo de JS con la nueva instantánea de estado.
El renderizador de React Native compara props e hijos, luego confirma cambios en vistas nativas.
La disposición y dibujo nativos ocurren en el hilo de UI después de la fase de compromiso.

¿React 19 agrupa llamadas setState en móvil?

Sí - las actualizaciones de manejadores de eventos, setTimeout, resoluciones de fetch y eventos nativos se agrupan por defecto.
Múltiples llamadas a setState en el mismo tick producen un renderizado.
Usa flushSync solo cuando intencionalmente necesites una pintura sincrónica (raro en móvil).

¿Por qué mis filas de FlatList se re-renderizan cuando cambia el estado del padre?

El re-renderizado del padre recrea renderItem a menos que sea memoizado; la nueva identidad de función puede derrotar la memoización de fila.
Context o props inestabilizados que fluyen hacia filas disparan actualizaciones de hijo.
Solución con memo en la fila, manejadores estables de useCallback y extraData solo cuando sea necesario.

¿Cuál es la diferencia entre props y state?

Props son entradas de un padre - de solo lectura desde la perspectiva del hijo.
State es propiedad del componente y actualizado a través de setState / useReducer.
Cambiar props re-renderiza el hijo; cambiar state re-renderiza el propietario y típicamente descendientes.

Error común: ¿Por qué memo no salta re-renderizados?

La comparación superficial ve un nuevo objeto o prop de función en cada renderizado del padre.
style={{ flex: 1 }} en línea crea un nuevo objeto cada vez.
Estabiliza callbacks con useCallback y eleva estilos a StyleSheet.create.

¿Debo elevar el estado o usar un almacén global?

Eleva el estado al padre más cercano que necesite coordinar hermanos - menos partes móviles.
Alcanza Context o Zustand cuando props se perforan a través de cinco o más capas o muchas pestañas consumen los mismos datos.
El estado de caché del servidor pertenece a TanStack Query, no duplicado en almacenes globales.

¿Cómo cambia Fabric el costo de los re-renderizados?

Fabric usa la Interfaz de JavaScript (JSI) para llamar directamente métodos nativos - menos serialización que el bridge viejo.
Aún pagas por el trabajo de renderizado de JS y la comparación nativa; menos copias, no menos nodos de árbol.
Perfila el tiempo de fotograma de JS y FPS de hilo de UI por separado.

¿Cuándo debo usar useRef en lugar de useState?

useRef almacena valores mutables que no deben disparar re-renderizados cuando se actualicen.
Los temporizadores, manijas de suscripción y patrones de "callback más reciente" son casos móviles comunes.
Si la interfaz debe reflejar el valor, usa useState.

¿Qué es extraData en FlatList?

FlatList es un PureComponent - puede saltar renderItem si la referencia de data no cambió.
Pasa extraData={selectedId} cuando la apariencia de fila depende de estado fuera de data.
No pases objetos de estado completo - pasa el primitivo o bandera mínima.

Error común: ¿Por qué mi recuento es incorrecto dentro de un bucle de llamadas setState?

// Incorrecto - cada llamada usa la misma instantánea
setCount(count + 1);
setCount(count + 1);
 
// Correcto - actualizador funcional se encadena en el valor más reciente
setCount((c) => c + 1);
setCount((c) => c + 1);

Las actualizaciones de estado se ponen en cola; la variable count en el cierre es obsoleta dentro del mismo manejador.

¿Los hijos se re-renderizan cuando el estado del padre cambia?

Por defecto, sí - un re-renderizado del padre vuelve a ejecutar hijos a menos que memo rechace con las mismas props.
La identidad del prop children cambia si el padre define en línea JSX que captura nuevos cierres.
Estructura subárboles pesados como componentes memoizados separados.

¿Cómo se relacionan los parámetros de navegación con props?

expo-router y React Navigation pasan parámetros de ruta como props o valores de hook (useLocalSearchParams).
Trata parámetros como entrada externa - copia a state si el usuario puede editarlos localmente.
Los cambios de parámetro disparan re-renderizados de pantalla como cualquier cambio de prop.

¿Qué es el doble-renderizado de React Strict Mode en dev?

React 19 Strict Mode en dev puede invocar renderizado dos veces para exponer efectos secundarios en renderizado.
Hermes + compilaciones dev de RN muestran esto solo cuando Strict Mode está habilitado en la raíz.
Los efectos secundarios pertenecen a useEffect, no al cuerpo de renderizado.

¿Cómo evito cierres obsoletos en manejadores Pressable?

Prefiere actualizaciones funcionales: setTodos((prev) => ...) para no cerrar sobre todos.
Almacena callbacks más recientes en una ref actualizada en cada renderizado para APIs de estilo de suscripción.
Los manejadores de lista deben aceptar argumentos de id en lugar de capturar variables de bucle cuando sea posible.

¿useMemo previene re-renderizados?

No - useMemo solo cachea un valor computado entre renderizados del mismo componente.
Evita recompilación costosa y estabiliza igualdad referencial para props de hijo.
Empareja con memo en hijos cuando pases objetos o arrays memoizados hacia abajo.

Relacionado

React Native Basics - modelo de componente y tour de proyecto
Views, Text & Core Components - qué realmente se actualiza en pantalla
Event Handling & Touchables - dónde generalmente comienzan las actualizaciones de estado
The Bridge, JSI & New Architecture - ruta de compromiso de Fabric en profundidad
Hermes & the JS Runtime - dónde se ejecuta tu función de renderizado
Best Practices - hábitos de rendimiento para aplicaciones de producción

Versiones de Stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).

Receta

Tarjeta de referencia rápida - lista para copiar y pegar.

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" },
});

Cuándo usarlo: Cualquier pantalla interactiva donde las props del padre configuren hijos y useState local maneje la interfaz que debe mantenerse sincronizada con vistas nativas.

Ejemplo Funcional

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 ? "Hecho" : "Abierto"}</Text>
    </Pressable>
  );
});
 
const SEED: Todo[] = [
  { id: "1", title: "Disposición de perfil con View + Text", done: true },
  { id: "2", title: "Conectar manejadores Pressable", done: false },
  { id: "3", title: "Medir rendimiento de desplazamiento en lista", 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}>Tareas ({openCount} abiertos)</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" ? "Todos" : "Abiertos"}
              </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}>Restablecer lista</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" },
});

Lo que esto demuestra:

Props (item, onToggle) fluyen hacia una fila memoizada mientras el estado (todos, filter) vive en la pantalla
Las actualizaciones de setState funcionales evitan cierres obsoletos al activar elementos
useMemo obtiene datos filtrados y cuenta abiertos sin re-renderizados extras de solo recompilación
useCallback mantiene handleToggle estable para que memo en TodoRow pueda saltar filas sin cambios
FlatList re-renderiza solo filas visibles - el estado padre aún dispara reconciliación para esas filas

Análisis Profundo

Cómo Funciona

Los componentes de función React son funciones - un re-renderizado llama la función nuevamente en el hilo de JavaScript (Hermes en Expo).
React compara el nuevo árbol de elementos contra el árbol de fibra anterior y programa actualizaciones.
El renderizador de React Native aplica cambios de props y disposición a vistas nativas en el hilo de UI (a través de Fabric en la Nueva Arquitectura).
useState y useReducer programan un re-renderizado cuando se ejecuta el actualizador; el valor devuelto es la instantánea del renderizado actual.
React 19 agrupa automáticamente múltiples llamadas a setState en manejadores de eventos, promesas y tiempos de espera en un renderizado.
Props son entradas de solo lectura del padre al hijo - los hijos solicitan cambios a través de callbacks.

Ruta de Actualización: JS a Nativo

Toque del usuario (hilo de UI)
  - evento enviado al hilo de JS
  - onPress / manejador se ejecuta
  - setState programa renderizado
  - función del componente se vuelve a ejecutar (JS)
  - React compara árbol virtual (JS)
  - Fabric confirma nodos de sombra cambiados
  - disposición nativa + pintura (hilo de UI)

El hilo de JS puede convertirse en un cuello de botella si cada fotograma ejecuta lógica pesada o renderiza árboles enormes.
El hilo de UI pierde fotogramas si la disposición es costosa o demasiadas vistas mutan por fotograma.
Reducir re-renderizados innecesarios reduce el trabajo de JS y reduce la comparación nativa.

Patrones de Estado en Móvil

Patrón	API	Nota móvil
Estado de interfaz local	`useState`	Campos de formulario, alternancias, estado abierto de hojas
Datos derivados	`useMemo`	Listas filtradas - más barato que almacenar estado duplicado
Manejadores estables	`useCallback`	Requerido para optimización de fila `memo`/`FlatList`
Referencias mutables	`useRef`	Temporizadores, manijas de animación - sin re-renderizado en cambio de `.current`
Estado de pantalla compartida	Context / store	Prefiere estado colocalizado hasta que múltiples pestañas lo necesiten
Datos del servidor	TanStack Query / `use`	Mantén el fetching fuera del renderizado; muestra esqueletos mientras está pendiente

Tabla de Decisión Props vs State

Situación	Usa props	Usa state
Valor propiedad del padre	✓
Valor cambia solo dentro del componente		✓
Componentes hermanos necesitan el mismo valor	Elevar al padre ✓
Valor de parámetros de navegación	Prop de ruta ✓	Copiar a state si es editable
Carga útil de API remota	Pasar después de fetch	Almacenar en caché de consulta

Notas de TypeScript

import type { Dispatch, SetStateAction } from "react";
 
interface ScreenProps {
  userId: string;
  onSignOut: () => void;
}
 
// Tipo de definidor explícito para callbacks que reenvían setState
type SetTodos = Dispatch<SetStateAction<Todo[]>>;
 
// Uniones discriminadas para interfaz asincrónica - evita estados imposibles de carga + error
type LoadState =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "error"; message: string }
  | { status: "success"; data: Todo[] };

Escribe props con interface o type; exporta props de fila cuando uses memo.
SetStateAction<T> cubre formas de valor y función de actualizador.
Estrecha ramas de renderizado con uniones discriminadas en lugar de múltiples booleanos no relacionados.

Errores Comunes

Callbacks en línea inestables en listas - onPress={() => toggle(item.id)} dentro de renderItem rompe memo en cada renderizado. Solución: Pasa id a una fila memoizada que llama un manejador de useCallback estable.
Almacenar datos derivados en estado - Mantener openTodos en estado junto a todos duplica actualizaciones y riesgo de divergencia. Solución: Obtén con useMemo de la fuente de verdad.
Mutar objetos de estado - todo.done = true luego setTodos(todos) puede saltar el re-renderizado porque la referencia no cambió. Solución: Devuelve nuevos objetos/arrays de actualizadores.
Asumir pintura nativa inmediata después de setState - JS termina el paso de renderizado antes de que native confirme; las ráfagas rápidas aún ponen en cola trabajo. Solución: Agrupa actualizaciones relacionadas; evita lecturas de disposición sincrónica después de cada tick.
Valor de Context recreado en cada renderizado - value={{ user, theme }} re-renderiza todos los consumidores. Solución: Memoriza el objeto de valor de context o divide contexts.
Sobre-memorizar todo - useMemo/useCallback tienen su propio costo y ruido. Solución: Perfila primero; optimiza filas de listas y cálculos puros pesados.
Leer estado justo después de setState - setCount(1); console.log(count) aún registra la instantánea antigua. Solución: Usa la forma de actualizador o useEffect clavado en el valor.

Alternativas

Alternativa	Usa cuando	No uses cuando
`useState` local	Interfaz de pantalla con alcance que no cruza rutas	Muchos primos distantes necesitan los mismos datos
React Context	Tema, sesión de auth, feature flags leídas ampliamente	Actualizaciones de alta frecuencia (posición de desplazamiento, pulsaciones de tecla)
Zustand / Jotai	Estado de aplicación mediano con boilerplate mínimo	Un callback padre-hijo es suficiente
TanStack Query	Listas de servidor, almacenamiento en caché, actualización de fondo	Toggle puramente local sin red
`useRef` para valores mutables	Fotogramas de animación, intervalos, manijas imperativas	Valores que deben aparecer en la pantalla
Entradas no controladas + ref	Formularios simples con pocos campos	Validación compleja entre pasos

FAQs

¿Qué sucede realmente cuando se llama setState en React Native?

React programa un re-renderizado del componente y sus descendientes (a menos que sea rechazado por memo).
La función del componente se ejecuta nuevamente en el hilo de JS con la nueva instantánea de estado.
El renderizador de React Native compara props e hijos, luego confirma cambios en vistas nativas.
La disposición y dibujo nativos ocurren en el hilo de UI después de la fase de compromiso.

¿React 19 agrupa llamadas setState en móvil?

Sí - las actualizaciones de manejadores de eventos, setTimeout, resoluciones de fetch y eventos nativos se agrupan por defecto.
Múltiples llamadas a setState en el mismo tick producen un renderizado.
Usa flushSync solo cuando intencionalmente necesites una pintura sincrónica (raro en móvil).

¿Por qué mis filas de FlatList se re-renderizan cuando cambia el estado del padre?

El re-renderizado del padre recrea renderItem a menos que sea memoizado; la nueva identidad de función puede derrotar la memoización de fila.
Context o props inestabilizados que fluyen hacia filas disparan actualizaciones de hijo.
Solución con memo en la fila, manejadores estables de useCallback y extraData solo cuando sea necesario.

¿Cuál es la diferencia entre props y state?

Props son entradas de un padre - de solo lectura desde la perspectiva del hijo.
State es propiedad del componente y actualizado a través de setState / useReducer.
Cambiar props re-renderiza el hijo; cambiar state re-renderiza el propietario y típicamente descendientes.

Error común: ¿Por qué memo no salta re-renderizados?

La comparación superficial ve un nuevo objeto o prop de función en cada renderizado del padre.
style={{ flex: 1 }} en línea crea un nuevo objeto cada vez.
Estabiliza callbacks con useCallback y eleva estilos a StyleSheet.create.

¿Debo elevar el estado o usar un almacén global?

Eleva el estado al padre más cercano que necesite coordinar hermanos - menos partes móviles.
Alcanza Context o Zustand cuando props se perforan a través de cinco o más capas o muchas pestañas consumen los mismos datos.
El estado de caché del servidor pertenece a TanStack Query, no duplicado en almacenes globales.

¿Cómo cambia Fabric el costo de los re-renderizados?

Fabric usa la Interfaz de JavaScript (JSI) para llamar directamente métodos nativos - menos serialización que el bridge viejo.
Aún pagas por el trabajo de renderizado de JS y la comparación nativa; menos copias, no menos nodos de árbol.
Perfila el tiempo de fotograma de JS y FPS de hilo de UI por separado.

¿Cuándo debo usar useRef en lugar de useState?

useRef almacena valores mutables que no deben disparar re-renderizados cuando se actualicen.
Los temporizadores, manijas de suscripción y patrones de "callback más reciente" son casos móviles comunes.
Si la interfaz debe reflejar el valor, usa useState.

¿Qué es extraData en FlatList?

FlatList es un PureComponent - puede saltar renderItem si la referencia de data no cambió.
Pasa extraData={selectedId} cuando la apariencia de fila depende de estado fuera de data.
No pases objetos de estado completo - pasa el primitivo o bandera mínima.

Error común: ¿Por qué mi recuento es incorrecto dentro de un bucle de llamadas setState?

// Incorrecto - cada llamada usa la misma instantánea
setCount(count + 1);
setCount(count + 1);
 
// Correcto - actualizador funcional se encadena en el valor más reciente
setCount((c) => c + 1);
setCount((c) => c + 1);

Las actualizaciones de estado se ponen en cola; la variable count en el cierre es obsoleta dentro del mismo manejador.

¿Los hijos se re-renderizan cuando el estado del padre cambia?

Por defecto, sí - un re-renderizado del padre vuelve a ejecutar hijos a menos que memo rechace con las mismas props.
La identidad del prop children cambia si el padre define en línea JSX que captura nuevos cierres.
Estructura subárboles pesados como componentes memoizados separados.

¿Cómo se relacionan los parámetros de navegación con props?

expo-router y React Navigation pasan parámetros de ruta como props o valores de hook (useLocalSearchParams).
Trata parámetros como entrada externa - copia a state si el usuario puede editarlos localmente.
Los cambios de parámetro disparan re-renderizados de pantalla como cualquier cambio de prop.

¿Qué es el doble-renderizado de React Strict Mode en dev?

React 19 Strict Mode en dev puede invocar renderizado dos veces para exponer efectos secundarios en renderizado.
Hermes + compilaciones dev de RN muestran esto solo cuando Strict Mode está habilitado en la raíz.
Los efectos secundarios pertenecen a useEffect, no al cuerpo de renderizado.

¿Cómo evito cierres obsoletos en manejadores Pressable?

Prefiere actualizaciones funcionales: setTodos((prev) => ...) para no cerrar sobre todos.
Almacena callbacks más recientes en una ref actualizada en cada renderizado para APIs de estilo de suscripción.
Los manejadores de lista deben aceptar argumentos de id en lugar de capturar variables de bucle cuando sea posible.

¿useMemo previene re-renderizados?

No - useMemo solo cachea un valor computado entre renderizados del mismo componente.
Evita recompilación costosa y estabiliza igualdad referencial para props de hijo.
Empareja con memo en hijos cuando pases objetos o arrays memoizados hacia abajo.

Relacionado

React Native Basics - modelo de componente y tour de proyecto
Views, Text & Core Components - qué realmente se actualiza en pantalla
Event Handling & Touchables - dónde generalmente comienzan las actualizaciones de estado
The Bridge, JSI & New Architecture - ruta de compromiso de Fabric en profundidad
Hermes & the JS Runtime - dónde se ejecuta tu función de renderizado
Best Practices - hábitos de rendimiento para aplicaciones de producción

Versiones de Stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).

Props, State y Re-renderizados en Móvil

Buscar en la documentación

Props, State y Re-renderizados en Móvil