Busca en todas las páginas de la documentación
Una lista de los refactors más comunes que valen la pena en código real de React y TypeScript - cada uno con una etiqueta en negrita, una rationale de una sola oración y un ejemplo breve antes/después. Úsalo como una pre-checklist de PR, una referencia de revisión de código, o una auditoría de búsqueda de anti-patrones en un codebase existente.
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥
Extrae valores mágicos a constantes nombradas - Reemplaza literales dispersos con una única fuente de verdad para que los ajustes no requieran un grep-and-pray en todo el repo.
// before
if (retries < 3) retry();
// after
const MAX_RETRIES = 3;
if (retries < MAX_RETRIES) retry();Reemplaza any con unknown y estrecha - Fuerza a los llamadores a probar la forma antes de usarla, capturando suposiciones malas en el límite en lugar de profundo en la UI.
// before
function parse(data: any) { return data.items.map(...); }
// after
function parse(data: unknown) {
if (!isPayload(data)) throw new Error("bad payload");
return data.items.map(...);
}Prefiere uniones discriminadas sobre props opcionales - Hace que estados imposibles sean no representables para que TypeScript rechace loading: true con data: Foo en tiempo de compilación.
// before
type State = { loading: boolean; data?: Foo; error?: Error };
// after
type State =
| { status: "loading" }
| { status: "success"; data: Foo }
| { status: "error"; error: Error };Extrae efectos repetidos en un hook personalizado - Seca la lógica transversal (polling, suscripciones, trampas de foco) y la hace unit-testeable en aislamiento.
// before
useEffect(() => {
const id = setInterval(fetchStatus, 5000);
return () => clearInterval(id);
}, []);
// after
usePolling(fetchStatus, 5000);Reemplaza prop drilling con context o una store - Elimina props pass-through de componentes que no se preocupan por el valor, para que agregar un nuevo consumidor no toque las capas intermedias.
// before
<Page user={user}><Toolbar user={user}><Avatar user={user} /></Toolbar></Page>
// after
<UserProvider value={user}><Page><Toolbar><Avatar /></Toolbar></Page></UserProvider>Calcula estado derivado durante el renderizado en lugar de almacenarlo - Elimina toda una clase de bugs "estos dos estados no coinciden" al hacer que la derivación sea la única fuente de verdad.
// before
const [items, setItems] = useState<Item[]>([]);
const [count, setCount] = useState(0); // drifts
// after
const [items, setItems] = useState<Item[]>([]);
const count = items.length;Memoiza computaciones costosas con useMemo - Salta trabajo repetido en renderizados causados por estado no relacionado, convirtiendo un lag de entrada visible en retroalimentación instantánea.
const sorted = useMemo(() => bigList.sort(compareFn), [bigList]);Envuelve callbacks en useCallback solo cuando se pasan a hijos memoizados - Mantiene los límites React.memo estables para que los descendientes salten re-renderizados en lugar de romper su memoización.
const onSelect = useCallback((id: string) => setSelected(id), []);
return <MemoizedList onSelect={onSelect} />;Divide componentes grandes por responsabilidad - Reduce el alcance del re-renderizado y el alcance de revisión para que un cambio en el header no cause un diff en el footer.
// before: 400-line <Dashboard /> doing header, filters, table, pagination
// after
<Dashboard><Header /><Filters /><Table /><Pagination /></Dashboard>Reemplaza useState enredado con useReducer - Centraliza transiciones relacionadas en una función para que los invariantes se puedan aplicar en lugar de dispersos en los handlers.
const [state, dispatch] = useReducer(cartReducer, initialCart);
dispatch({ type: "add", item });Convierte componentes de clase a componentes de función - Desbloquea hooks, bundles más pequeños, y patrones modernos como Suspense y Server Components.
// before
class Timer extends React.Component { /* lifecycle methods */ }
// after
function Timer() { useEffect(() => { /* ... */ }, []); return <span /> }Usa as const para inferencia literal - Fija valores de string y array a sus tipos literales exactos para que fluyan a través de genéricos en lugar de ampliarse a string.
// before
const roles = ["admin", "user"]; // string[]
// after
const roles = ["admin", "user"] as const; // readonly ["admin", "user"]Reemplaza enum con una unión de objeto as const - Produce mejor tree-shaking, JSON más amigable, y tipos más claros sin los quirks de runtime de TypeScript enum.
// before
enum Status { Open, Closed }
// after
const Status = { Open: "open", Closed: "closed" } as const;
type Status = (typeof Status)[keyof typeof Status];Eleva tipos compartidos a un módulo dedicado - Previene drift de tipos cuando la misma forma se redeclara en tres componentes con campos ligeramente diferentes.
// src/types/user.ts
export interface User { id: string; email: string; roles: Role[] }Usa satisfies para validar sin ampliar - Mantiene el tipo inferido estrecho mientras aún verificas que el valor se conforme, para que el autocomplete se mantenga agudo.
const routes = {
home: "/",
admin: "/admin",
} satisfies Record<string, `/${string}`>;Reemplaza keys de índice de array con IDs estables - Arregla bugs de reorden, pérdida de foco de input, y glitches de animación causados por React reutilizando el nodo DOM incorrecto.
// before
items.map((item, i) => <Row key={i} {...item} />)
// after
items.map((item) => <Row key={item.id} {...item} />)Reemplaza fetches con useEffect con TanStack Query (o SWR) - Obtén caching, deduplicación, retries, y cancellación de solicitudes gratis, eliminando docenas de líneas de boilerplate de loading/error.
const { data, isLoading } = useQuery({ queryKey: ["user", id], queryFn: () => fetchUser(id) });Valida datos externos con Zod en el límite - Convierte crashes "undefined is not a function" profundos en la UI en un único y explícito parse failure en el borde.
const User = z.object({ id: z.string(), email: z.string().email() });
const user = User.parse(await res.json());Divide un mega-context en contexts dirigidos - Detiene que cada consumidor se re-renderice cuando un slice no relacionado cambia, convirtiendo una app lenta en una snappy.
<AuthProvider>
<ThemeProvider>
<CartProvider>{children}</CartProvider>
</ThemeProvider>
</AuthProvider>Coloca state junto al componente que lo posee - Reduce el alcance del razonamiento y hace que la eliminación sea trivial cuando la feature desaparece.
// before: modal open state in a global store
// after: useState inside <Modal /> itself
const [open, setOpen] = useState(false);Reemplaza sopa de boolean-prop con una unión variant - Elimina combinaciones imposibles como primary && danger && outline en el nivel de tipo.
// before
<Button primary danger outline />
// after
<Button variant="danger-outline" />Extrae lógica de forma en react-hook-form + Zod - Elimina la turbulencia de input controlado, centraliza validación, y hace la forma declarativa en lugar de imperativa.
const form = useForm<FormValues>({ resolver: zodResolver(Schema) });
<input {...form.register("email")} />Reemplaza ternarios anidados con early returns - Aplana branching para que el happy path lea de arriba a abajo sin sostener un parse tree en tu cabeza.
// before
return loading ? <Spinner /> : error ? <Error /> : data ? <View data={data} /> : null;
// after
if (loading) return <Spinner />;
if (error) return <Error />;
if (!data) return null;
return <View data={data} />;Convierte ops DOM imperativas a state declarativo - Se alinea con el modelo mental de React para que los re-renderizados no puedan accidentalmente deshacer una mutación manual de DOM.
// before
useEffect(() => { ref.current!.classList.add("open"); }, [open]);
// after
<div className={open ? "open" : ""} />Usa optional chaining y nullish coalescing - Reemplaza guard pyramids con una sola expresión que aún maneja explícitamente los casos null/undefined.
// before
const name = user && user.profile && user.profile.name ? user.profile.name : "guest";
// after
const name = user?.profile?.name ?? "guest";Mueve UI estática a un Server Component - Envía menos JavaScript al cliente y mantiene data-fetching cerca de la fuente sin una roundtrip de hidratación.
// app/page.tsx (Server Component by default in App Router)
export default async function Page() {
const posts = await db.posts.findMany();
return <PostList posts={posts} />;
}Lazy-carga rutas y widgets pesados - Mantiene el bundle inicial pequeño para que la primera pintura interactiva no espere en una librería de gráficos que el usuario puede nunca abrir.
const Chart = lazy(() => import("./Chart"));
<Suspense fallback={<Spinner />}><Chart /></Suspense>Reemplaza React.FC con un tipo de prop explícito - Te da control sobre el contrato children y coincide con el consenso comunitario actual sobre tipado de componentes.
// before
const Card: React.FC<{ title: string }> = ({ title, children }) => <div>{title}{children}</div>;
// after
function Card({ title, children }: { title: string; children?: React.ReactNode }) {
return <div>{title}{children}</div>;
}Envuelve subárboles riesgosos en un error boundary - Aísla el radio de blast para que un gráfico roto no derribe todo el dashboard.
<ErrorBoundary fallback={<ChartError />}>
<Chart />
</ErrorBoundary>Suelta banderas de loading pareando Suspense con una librería de datos - Elimina ramas isLoading a favor de un único fallback boundary, permitiendo a los componentes asumir que los datos están presentes.
<Suspense fallback={<Skeleton />}>
<UserProfile id={id} /> {/* reads data via `use` or a suspending query */}
</Suspense>useMemo/useCallback en todas partes agrega ruido sin ganancias medibles. Arreglo: solo memoiza después de un profiler trace o cuando un downstream React.memo depende de estabilidad referencial.any de una sola vez crea diffs enormes sin cambio de comportamiento. Arreglo: habilita banderas strict incrementalmente y corrige drift en el límite del módulo.| Alternativa | Usa cuando | No uses cuando |
|---|---|---|
| Codemods (jscodeshift, ts-morph) | El refactor es mecánico y se repite en cientos de archivos. | El cambio necesita juicio humano por sitio. |
| Big-bang rewrite | El código viejo es fundamentalmente unsafe y no existe camino incremental. | Los refactors incrementales son posibles - casi siempre lo son. |
| Strangler fig pattern | Estás migrando de un framework o patrón legacy gradualmente. | El codebase es lo suficientemente pequeño para refactor en un barrido. |
| Deprecation comments + lint rules | No puedes refactor todos los call sites inmediatamente pero quieres prevenir nuevos usos. | El patrón ya es totalmente removible. |
React.memo'd que de otra manera se re-renderizaría en cada parent render.loading: true con data: Foo simplemente no type-checkará.error cuando loading reinicia - las uniones no.as const componen naturalmente con satisfies y tipos de template literal.unknown más una función de narrowing es más seguro en cada caso en que any es tentador.any, confínalo a una sola función y comenta por qué - no lo dejes filtrar a través de límites de módulo.useEffect para true side-effects al mundo exterior: suscripciones, timers, APIs imperativas.useReducer con acciones nombradas.useRef en su lugar.any, as any, @ts-expect-error, y // eslint-disable - marcan la rot.Revisado por Chris St. John·Última actualización: 7 jul 2026
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥