Conceptos Básicos de Networking

10 ejemplos para tiempos de espera, cancelación y análisis en el borde móvil - la base que toda app Expo SDK 57 necesita antes de agregar TanStack Query o axios.

Requisitos previos

React Native 0.86 incluye una implementación WHATWG fetch respaldada por pilas de networking nativas. Comienza con una app Expo en blanco:

npx create-expo-app@latest MyNetworkApp --template blank-typescript
cd MyNetworkApp
npx expo install zod @react-native-community/netinfo

Crea un pequeño módulo API para que las pantallas nunca llamen a URLs sin procesar:

// src/api/config.ts
export const API_BASE =
  process.env.EXPO_PUBLIC_API_URL ?? "https://jsonplaceholder.typicode.com";

Herramientas: Estos ejemplos apuntan a Expo SDK 57 (expo ~57.0.4), React Native 0.86.0 y React 19.2.3. Prueba en un dispositivo físico sobre móvil - los simuladores ocultan el dolor del cambio de LTE.

Ejemplos Básicos

1. Un GET mínimo con fetch

El fetch móvil refleja las APIs web. Siempre verifica response.ok antes de analizar - HTTP 404 sigue resolviendo la promesa.

async function getPost(id: number) {
  const res = await fetch(`${API_BASE}/posts/${id}`);
  if (!res.ok) {
    throw new Error(`HTTP ${res.status}`);
  }
  return res.json() as Promise<{ id: number; title: string; body: string }>;
}

fetch nunca lanza en 4xx/5xx - debes inspeccionar res.ok o res.status
Los errores de DNS y TLS lanzan TypeError - a menudo indistinguibles de offline a primera vista
Mantén las URLs en API_BASE - nunca disperses hosts de producción en carpetas de características

Relacionado: Fetch vs axios - cuándo los interceptores justifican el costo del bundle

2. Tiempos de Espera de Solicitud con AbortController

A diferencia de los navegadores, fetch de React Native no tiene opción timeout incorporada. Combina AbortController con setTimeout:

export async function fetchWithTimeout(
  input: RequestInfo | URL,
  init: RequestInit = {},
  timeoutMs = 10_000
) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), timeoutMs);
 
  try {
    const res = await fetch(input, { ...init, signal: controller.signal });
    return res;
  } finally {
    clearTimeout(timer);
  }
}

// Uso
const res = await fetchWithTimeout(`${API_BASE}/posts/1`, {}, 8_000);

Predeterminado 8-15 s en lecturas - los túneles del metro y zonas muertas de ascensores superan regularmente 3 s
Más corto para mutaciones - los usuarios perciben los POSTs estancados como rotos; falla rápido y ofrece Reintentar
AbortError en timeout es distinto de la red TypeError - clasifica antes de mostrar copia

3. Cancelar Solicitudes en Vuelo al Desmontar

Las pantallas se desmontan cuando los usuarios se alejan durante una solicitud. Conecta AbortController a la limpieza de useEffect:

import { useEffect, useState } from "react";
import { ActivityIndicator, Text, View } from "react-native";
 
export function PostDetail({ postId }: { postId: number }) {
  const [post, setPost] = useState<{ title: string } | null>(null);
  const [error, setError] = useState<string | null>(null);
 
  useEffect(() => {
    const controller = new AbortController();
 
    (async () => {
      try {
        const res = await fetch(`${API_BASE}/posts/${postId}`, {
          signal: controller.signal,
        });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        setPost(await res.json());
      } catch (e) {
        if (e instanceof Error && e.name === "AbortError") return;
        setError(e instanceof Error ? e.message : "Request failed");
      }
    })();
 
    return () => controller.abort();
  }, [postId]);
 
  if (error) return <Text>{error}</Text>;
  if (!post) return <ActivityIndicator />;
  return <Text>{post.title}</Text>;
}

Ignora AbortError en catch - la cancelación es esperada, no un fallo visible para el usuario
Cambiar postId cancela automáticamente la solicitud anterior mediante la re-ejecución del efecto
Con TanStack Query, prefiere queryKey + cancelación incorporada - ver TanStack Query on Mobile

4. Analizar JSON de Forma Segura en el Borde

Nunca conviertas res.json() ciegamente. Valida una vez en el límite de red:

import { z } from "zod";
 
const postSchema = z.object({
  id: z.number(),
  title: z.string(),
  body: z.string(),
});
 
export type Post = z.infer<typeof postSchema>;
 
export async function getPostSafe(id: number): Promise<Post> {
  const res = await fetchWithTimeout(`${API_BASE}/posts/${id}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
 
  const raw: unknown = await res.json();
  return postSchema.parse(raw);
}

Zod .parse lanza ZodError - mapea a "respuesta del servidor inesperada" en UI, no un rastreo de pila
Los esquemas compartidos potencian pruebas de contrato - ver Contract Tests for APIs
Analiza arrays con z.array(schema) - los endpoints de lista se desvían más a menudo que los endpoints de detalle

5. Clasificar Errores de Red para UX

Los usuarios móviles necesitan copias diferentes para offline, timeout y errores del servidor:

export type NetworkErrorKind = "offline" | "timeout" | "http" | "parse" | "unknown";
 
export function classifyFetchError(error: unknown, status?: number): NetworkErrorKind {
  if (status && status >= 400) return "http";
  if (error instanceof Error) {
    if (error.name === "AbortError") return "timeout";
    if (error instanceof TypeError) return "offline";
  }
  return "unknown";
}
 
export function userMessage(kind: NetworkErrorKind): string {
  switch (kind) {
    case "offline":
      return "Sin conexión. Comprueba el modo avión o intenta de nuevo cuando estés en línea.";
    case "timeout":
      return "Esto está tomando demasiado tiempo. Intenta de nuevo con una señal más fuerte.";
    case "http":
      return "El servidor no pudo completar esta solicitud.";
    case "parse":
      return "Se recibió una respuesta inesperada. Intenta de nuevo más tarde.";
    default:
      return "Algo salió mal. Por favor, reintenta.";
  }
}

Empareja con NetInfo para banners de conectividad - ver Network Failure UX
No muestres el banner offline en HTTP 500 - Wi-Fi está bien; el servidor no

6. JSON POST con Content-Type y Body

Las mutaciones necesitan encabezados explícitos. JSON.stringify en objetos simples - FormData es separado (cargas de varias partes):

export async function createPost(title: string, body: string) {
  const res = await fetchWithTimeout(
    `${API_BASE}/posts`,
    {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ title, body, userId: 1 }),
    },
    12_000
  );
 
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return postSchema.parse(await res.json());
}

Content-Type: application/json es requerido - omitirlo rompe muchos analizadores de Rails/Express
Las claves de idempotencia en POST pertenecen en encabezados para flujos de pago - ver Retries, Backoff & Idempotency
Adjunta tokens de autenticación en un cliente compartido - ver Mobile Auth Basics

7. Parámetros de Consulta sin Errores de Cadena

Construye URLs de búsqueda con URLSearchParams - evita ?foo=undefined y errores de codificación:

export async function searchPosts(query: string, limit = 20) {
  const params = new URLSearchParams({
    q: query,
    _limit: String(limit),
  });
 
  const res = await fetchWithTimeout(`${API_BASE}/posts?${params}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
 
  const raw: unknown = await res.json();
  return z.array(postSchema).parse(raw);
}

Codifica entrada del usuario - URLSearchParams maneja &, espacios y Unicode
Omite parámetros opcionales vacíos - params.delete("q") cuando la consulta está vacía
Para paginación de cursor, pasa cursor como parámetro de cadena; valida la forma con Zod

8. Cliente API Central con Encabezados de Autenticación

Un módulo adjunta tokens portadores, URL base y timeout predeterminado - las características importan apiGet / apiPost:

// src/api/client.ts
import * as SecureStore from "expo-secure-store";
import { fetchWithTimeout } from "./fetchWithTimeout";
import { API_BASE } from "./config";
 
async function authHeaders(): Promise<HeadersInit> {
  const token = await SecureStore.getItemAsync("access_token");
  return {
    Accept: "application/json",
    "Content-Type": "application/json",
    ...(token ? { Authorization: `Bearer ${token}` } : {}),
  };
}
 
export async function apiGet<T>(path: string, parse: (raw: unknown) => T): Promise<T> {
  const res = await fetchWithTimeout(`${API_BASE}${path}`, {
    headers: await authHeaders(),
  });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return parse(await res.json());
}

npx expo install expo-secure-store

Nunca leas tokens en cada pantalla - la rotación y el cierre de sesión se vuelven imposibles de auditar
En 401, activa actualización o limpieza de sesión - ver Refresh Token Rotation
Rechaza URLs que no sean HTTPS en compilaciones de producción en este punto de estrangulamiento

9. Manejar Respuestas Vacías y que No Son JSON

Los endpoints DELETE y algunos PATCH devuelven 204 No Content. Llamar a res.json() lanza:

export async function deletePost(id: number, headers: HeadersInit): Promise<void> {
  const res = await fetchWithTimeout(`${API_BASE}/posts/${id}`, {
    method: "DELETE",
    headers,
  });
 
  if (res.status === 204) return;
 
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
 
  const text = await res.text();
  if (!text) return;
  // Algunas APIs devuelven cuerpos JSON en DELETE - analiza solo cuando esté presente
  JSON.parse(text);
}

Verifica Content-Type antes de analizar - las páginas de error text/html llegan como 200 desde proxies mal configurados
Usa res.text() luego JSON.parse cuando los cuerpos son opcionales - errores más claros que res.json() en vacío
Registra fallos de análisis solo en dev - nunca envíes cuerpos de respuesta sin procesar a usuarios

10. Hook Tipado con Carga, Error y Reintentar

Antes de adoptar TanStack Query, comprende el patrón manual - luego reemplázalo:

import { useCallback, useEffect, useState } from "react";
import { Pressable, Text, View } from "react-native";
import { API_BASE } from "../api/config";
import { fetchWithTimeout } from "../api/fetchWithTimeout";
import { postSchema, type Post } from "../api/posts";
 
export function PostScreen({ id }: { id: number }) {
  const [data, setData] = useState<Post | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
 
  const load = useCallback(async (signal?: AbortSignal) => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetchWithTimeout(`${API_BASE}/posts/${id}`, { signal });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      setData(postSchema.parse(await res.json()));
    } catch (e) {
      if (e instanceof Error && e.name === "AbortError") return;
      setError(e instanceof Error ? e.message : "Failed");
    } finally {
      setLoading(false);
    }
  }, [id]);
 
  useEffect(() => {
    const controller = new AbortController();
    void load(controller.signal);
    return () => controller.abort();
  }, [load]);
 
  return (
    <View style={{ padding: 16 }}>
      {loading && <Text>Cargando…</Text>}
      {error && (
        <>
          <Text>{error}</Text>
          <Pressable onPress={() => load()}>
            <Text>Reintentar</Text>
          </Pressable>
        </>
      )}
      {data && <Text>{data.title}</Text>}
    </View>
  );
}

Reintentar llama a load() - no Updates.reloadAsync() o reinicio de app
Pasa a useQuery cuando necesites caché, deduplicación y actualización de fondo - TanStack Query on Mobile
Persiste modelos de lectura offline con Offline-First Basics

Patrones Intermedios

Combinar Timeout - Cancelación - Análisis

export async function requestJson<T>(
  path: string,
  options: RequestInit & { timeoutMs?: number; parse: (raw: unknown) => T }
): Promise<T> {
  const { timeoutMs = 10_000, parse, ...init } = options;
  const res = await fetchWithTimeout(`${API_BASE}${path}`, init, timeoutMs);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return parse(await res.json());
}

React 19 `use` con Suspense (Opcional)

Si tu equipo adopta Suspense para datos, mantén el mismo envoltorio de timeout - solo el sitio de consumo cambia. La mayoría de apps Expo aún prefieren TanStack Query para la semántica de caché en móvil.

Errores Comunes

Asumir que fetch lanza en 404 - Se resuelve; verifica res.ok. Solución: El cliente central lanza en !res.ok.
Sin timeout en móvil - Las solicitudes cuelgan hasta que el SO las mata. Solución: AbortController + 8-15 s predeterminado.
Analizar antes de verificar estado - Los cuerpos HTML de error bloquean el análisis JSON. Solución: Verifica res.ok primero.
setState después de desmontar - Olvidó limpieza de aborto. Solución: useEffect retorna () => controller.abort().
Confiar en EXPO_PUBLIC_API_URL en prod sin protección HTTPS - La fuga de texto claro filtra tokens. Solución: Afirma https:// en el cliente de producción.

Relacionado

Fetch vs axios - interceptores, progreso de carga, tamaño del bundle
TanStack Query on Mobile - caché, enfoque y gerentes en línea
Retries, Backoff & Idempotency - reintentos seguros en LTE defectuoso
Network Failure UX - banners, datos obsoletos, colas de reintentos
Mobile Auth Basics - adjuntar tokens en la capa del cliente
Networking Best Practices - lista de verificación condensada para toda la secció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).

Requisitos previos

React Native 0.86 incluye una implementación WHATWG fetch respaldada por pilas de networking nativas. Comienza con una app Expo en blanco:

npx create-expo-app@latest MyNetworkApp --template blank-typescript
cd MyNetworkApp
npx expo install zod @react-native-community/netinfo

Crea un pequeño módulo API para que las pantallas nunca llamen a URLs sin procesar:

// src/api/config.ts
export const API_BASE =
  process.env.EXPO_PUBLIC_API_URL ?? "https://jsonplaceholder.typicode.com";

Herramientas: Estos ejemplos apuntan a Expo SDK 57 (expo ~57.0.4), React Native 0.86.0 y React 19.2.3. Prueba en un dispositivo físico sobre móvil - los simuladores ocultan el dolor del cambio de LTE.

Ejemplos Básicos

1. Un GET mínimo con fetch

El fetch móvil refleja las APIs web. Siempre verifica response.ok antes de analizar - HTTP 404 sigue resolviendo la promesa.

async function getPost(id: number) {
  const res = await fetch(`${API_BASE}/posts/${id}`);
  if (!res.ok) {
    throw new Error(`HTTP ${res.status}`);
  }
  return res.json() as Promise<{ id: number; title: string; body: string }>;
}

fetch nunca lanza en 4xx/5xx - debes inspeccionar res.ok o res.status
Los errores de DNS y TLS lanzan TypeError - a menudo indistinguibles de offline a primera vista
Mantén las URLs en API_BASE - nunca disperses hosts de producción en carpetas de características

Relacionado: Fetch vs axios - cuándo los interceptores justifican el costo del bundle

2. Tiempos de Espera de Solicitud con AbortController

A diferencia de los navegadores, fetch de React Native no tiene opción timeout incorporada. Combina AbortController con setTimeout:

export async function fetchWithTimeout(
  input: RequestInfo | URL,
  init: RequestInit = {},
  timeoutMs = 10_000
) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), timeoutMs);
 
  try {
    const res = await fetch(input, { ...init, signal: controller.signal });
    return res;
  } finally {
    clearTimeout(timer);
  }
}

// Uso
const res = await fetchWithTimeout(`${API_BASE}/posts/1`, {}, 8_000);

Predeterminado 8-15 s en lecturas - los túneles del metro y zonas muertas de ascensores superan regularmente 3 s
Más corto para mutaciones - los usuarios perciben los POSTs estancados como rotos; falla rápido y ofrece Reintentar
AbortError en timeout es distinto de la red TypeError - clasifica antes de mostrar copia

3. Cancelar Solicitudes en Vuelo al Desmontar

Las pantallas se desmontan cuando los usuarios se alejan durante una solicitud. Conecta AbortController a la limpieza de useEffect:

import { useEffect, useState } from "react";
import { ActivityIndicator, Text, View } from "react-native";
 
export function PostDetail({ postId }: { postId: number }) {
  const [post, setPost] = useState<{ title: string } | null>(null);
  const [error, setError] = useState<string | null>(null);
 
  useEffect(() => {
    const controller = new AbortController();
 
    (async () => {
      try {
        const res = await fetch(`${API_BASE}/posts/${postId}`, {
          signal: controller.signal,
        });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        setPost(await res.json());
      } catch (e) {
        if (e instanceof Error && e.name === "AbortError") return;
        setError(e instanceof Error ? e.message : "Request failed");
      }
    })();
 
    return () => controller.abort();
  }, [postId]);
 
  if (error) return <Text>{error}</Text>;
  if (!post) return <ActivityIndicator />;
  return <Text>{post.title}</Text>;
}

Ignora AbortError en catch - la cancelación es esperada, no un fallo visible para el usuario
Cambiar postId cancela automáticamente la solicitud anterior mediante la re-ejecución del efecto
Con TanStack Query, prefiere queryKey + cancelación incorporada - ver TanStack Query on Mobile

4. Analizar JSON de Forma Segura en el Borde

Nunca conviertas res.json() ciegamente. Valida una vez en el límite de red:

import { z } from "zod";
 
const postSchema = z.object({
  id: z.number(),
  title: z.string(),
  body: z.string(),
});
 
export type Post = z.infer<typeof postSchema>;
 
export async function getPostSafe(id: number): Promise<Post> {
  const res = await fetchWithTimeout(`${API_BASE}/posts/${id}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
 
  const raw: unknown = await res.json();
  return postSchema.parse(raw);
}

Zod .parse lanza ZodError - mapea a "respuesta del servidor inesperada" en UI, no un rastreo de pila
Los esquemas compartidos potencian pruebas de contrato - ver Contract Tests for APIs
Analiza arrays con z.array(schema) - los endpoints de lista se desvían más a menudo que los endpoints de detalle

5. Clasificar Errores de Red para UX

Los usuarios móviles necesitan copias diferentes para offline, timeout y errores del servidor:

export type NetworkErrorKind = "offline" | "timeout" | "http" | "parse" | "unknown";
 
export function classifyFetchError(error: unknown, status?: number): NetworkErrorKind {
  if (status && status >= 400) return "http";
  if (error instanceof Error) {
    if (error.name === "AbortError") return "timeout";
    if (error instanceof TypeError) return "offline";
  }
  return "unknown";
}
 
export function userMessage(kind: NetworkErrorKind): string {
  switch (kind) {
    case "offline":
      return "Sin conexión. Comprueba el modo avión o intenta de nuevo cuando estés en línea.";
    case "timeout":
      return "Esto está tomando demasiado tiempo. Intenta de nuevo con una señal más fuerte.";
    case "http":
      return "El servidor no pudo completar esta solicitud.";
    case "parse":
      return "Se recibió una respuesta inesperada. Intenta de nuevo más tarde.";
    default:
      return "Algo salió mal. Por favor, reintenta.";
  }
}

Empareja con NetInfo para banners de conectividad - ver Network Failure UX
No muestres el banner offline en HTTP 500 - Wi-Fi está bien; el servidor no

6. JSON POST con Content-Type y Body

Las mutaciones necesitan encabezados explícitos. JSON.stringify en objetos simples - FormData es separado (cargas de varias partes):

export async function createPost(title: string, body: string) {
  const res = await fetchWithTimeout(
    `${API_BASE}/posts`,
    {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ title, body, userId: 1 }),
    },
    12_000
  );
 
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return postSchema.parse(await res.json());
}

Content-Type: application/json es requerido - omitirlo rompe muchos analizadores de Rails/Express
Las claves de idempotencia en POST pertenecen en encabezados para flujos de pago - ver Retries, Backoff & Idempotency
Adjunta tokens de autenticación en un cliente compartido - ver Mobile Auth Basics

7. Parámetros de Consulta sin Errores de Cadena

Construye URLs de búsqueda con URLSearchParams - evita ?foo=undefined y errores de codificación:

export async function searchPosts(query: string, limit = 20) {
  const params = new URLSearchParams({
    q: query,
    _limit: String(limit),
  });
 
  const res = await fetchWithTimeout(`${API_BASE}/posts?${params}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
 
  const raw: unknown = await res.json();
  return z.array(postSchema).parse(raw);
}

Codifica entrada del usuario - URLSearchParams maneja &, espacios y Unicode
Omite parámetros opcionales vacíos - params.delete("q") cuando la consulta está vacía
Para paginación de cursor, pasa cursor como parámetro de cadena; valida la forma con Zod

8. Cliente API Central con Encabezados de Autenticación

Un módulo adjunta tokens portadores, URL base y timeout predeterminado - las características importan apiGet / apiPost:

// src/api/client.ts
import * as SecureStore from "expo-secure-store";
import { fetchWithTimeout } from "./fetchWithTimeout";
import { API_BASE } from "./config";
 
async function authHeaders(): Promise<HeadersInit> {
  const token = await SecureStore.getItemAsync("access_token");
  return {
    Accept: "application/json",
    "Content-Type": "application/json",
    ...(token ? { Authorization: `Bearer ${token}` } : {}),
  };
}
 
export async function apiGet<T>(path: string, parse: (raw: unknown) => T): Promise<T> {
  const res = await fetchWithTimeout(`${API_BASE}${path}`, {
    headers: await authHeaders(),
  });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return parse(await res.json());
}

npx expo install expo-secure-store

Nunca leas tokens en cada pantalla - la rotación y el cierre de sesión se vuelven imposibles de auditar
En 401, activa actualización o limpieza de sesión - ver Refresh Token Rotation
Rechaza URLs que no sean HTTPS en compilaciones de producción en este punto de estrangulamiento

9. Manejar Respuestas Vacías y que No Son JSON

Los endpoints DELETE y algunos PATCH devuelven 204 No Content. Llamar a res.json() lanza:

export async function deletePost(id: number, headers: HeadersInit): Promise<void> {
  const res = await fetchWithTimeout(`${API_BASE}/posts/${id}`, {
    method: "DELETE",
    headers,
  });
 
  if (res.status === 204) return;
 
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
 
  const text = await res.text();
  if (!text) return;
  // Algunas APIs devuelven cuerpos JSON en DELETE - analiza solo cuando esté presente
  JSON.parse(text);
}

Verifica Content-Type antes de analizar - las páginas de error text/html llegan como 200 desde proxies mal configurados
Usa res.text() luego JSON.parse cuando los cuerpos son opcionales - errores más claros que res.json() en vacío
Registra fallos de análisis solo en dev - nunca envíes cuerpos de respuesta sin procesar a usuarios

10. Hook Tipado con Carga, Error y Reintentar

Antes de adoptar TanStack Query, comprende el patrón manual - luego reemplázalo:

import { useCallback, useEffect, useState } from "react";
import { Pressable, Text, View } from "react-native";
import { API_BASE } from "../api/config";
import { fetchWithTimeout } from "../api/fetchWithTimeout";
import { postSchema, type Post } from "../api/posts";
 
export function PostScreen({ id }: { id: number }) {
  const [data, setData] = useState<Post | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
 
  const load = useCallback(async (signal?: AbortSignal) => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetchWithTimeout(`${API_BASE}/posts/${id}`, { signal });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      setData(postSchema.parse(await res.json()));
    } catch (e) {
      if (e instanceof Error && e.name === "AbortError") return;
      setError(e instanceof Error ? e.message : "Failed");
    } finally {
      setLoading(false);
    }
  }, [id]);
 
  useEffect(() => {
    const controller = new AbortController();
    void load(controller.signal);
    return () => controller.abort();
  }, [load]);
 
  return (
    <View style={{ padding: 16 }}>
      {loading && <Text>Cargando…</Text>}
      {error && (
        <>
          <Text>{error}</Text>
          <Pressable onPress={() => load()}>
            <Text>Reintentar</Text>
          </Pressable>
        </>
      )}
      {data && <Text>{data.title}</Text>}
    </View>
  );
}

Reintentar llama a load() - no Updates.reloadAsync() o reinicio de app
Pasa a useQuery cuando necesites caché, deduplicación y actualización de fondo - TanStack Query on Mobile
Persiste modelos de lectura offline con Offline-First Basics

Patrones Intermedios

Combinar Timeout - Cancelación - Análisis

export async function requestJson<T>(
  path: string,
  options: RequestInit & { timeoutMs?: number; parse: (raw: unknown) => T }
): Promise<T> {
  const { timeoutMs = 10_000, parse, ...init } = options;
  const res = await fetchWithTimeout(`${API_BASE}${path}`, init, timeoutMs);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return parse(await res.json());
}

React 19 `use` con Suspense (Opcional)

Errores Comunes

Asumir que fetch lanza en 404 - Se resuelve; verifica res.ok. Solución: El cliente central lanza en !res.ok.
Sin timeout en móvil - Las solicitudes cuelgan hasta que el SO las mata. Solución: AbortController + 8-15 s predeterminado.
Analizar antes de verificar estado - Los cuerpos HTML de error bloquean el análisis JSON. Solución: Verifica res.ok primero.
setState después de desmontar - Olvidó limpieza de aborto. Solución: useEffect retorna () => controller.abort().
Confiar en EXPO_PUBLIC_API_URL en prod sin protección HTTPS - La fuga de texto claro filtra tokens. Solución: Afirma https:// en el cliente de producción.

Relacionado

Fetch vs axios - interceptores, progreso de carga, tamaño del bundle
TanStack Query on Mobile - caché, enfoque y gerentes en línea
Retries, Backoff & Idempotency - reintentos seguros en LTE defectuoso
Network Failure UX - banners, datos obsoletos, colas de reintentos
Mobile Auth Basics - adjuntar tokens en la capa del cliente
Networking Best Practices - lista de verificación condensada para toda la secció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).

Conceptos Básicos de Networking

Buscar en la documentación

Conceptos Básicos de Networking