Busque em todas as páginas da documentação
Uma lista das refatorações mais comuns que compensam em código real de React e TypeScript - cada uma com um rótulo em negrito, uma justificativa de uma frase e um pequeno trecho antes/depois. Use-a como uma lista de verificação pré-PR, uma referência de revisão de código ou uma auditoria de caça a picos em uma base de código existente.
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥
Extraia valores mágicos para constantes nomeadas - Substitui literais espalhados por uma única fonte de verdade, para que ajustes não exijam um grep-and-pray (buscar e rezar) em todo o repositório.
// antes
if (retries < 3) retry();
// depois
const MAX_RETRIES = 3;
if (retries < MAX_RETRIES) retry();Substitua any por unknown e estreite - Força os chamadores a provarem a forma antes do uso, capturando suposições incorretas na fronteira em vez de profundamente na UI.
// antes
function parse(data: any) { return data.items.map(...); }
// depois
function parse(data: unknown) {
if (!isPayload(data)) throw new Error("bad payload");
return data.items.map(...);
}Prefira uniões discriminadas em vez de props opcionais - Torna estados impossíveis irrepresentáveis, para que o TypeScript rejeite loading: true com data: Foo em tempo de compilação.
// antes
type State = { loading: boolean; data?: Foo; error?: Error };
// depois
type State =
| { status: "loading" }
| { status: "success"; data: Foo }
| { status: "error"; error: Error };Extraia efeitos repetidos para um hook personalizado - DRY (Don't Repeat Yourself - Não se Repita) a lógica transversal (polling, assinaturas, armadilhas de foco) e a torna testável isoladamente.
// antes
useEffect(() => {
const id = setInterval(fetchStatus, 5000);
return () => clearInterval(id);
}, []);
// depois
usePolling(fetchStatus, 5000);Substitua prop drilling por context ou um store - Remove props de passagem de componentes que não se importam com o valor, para que adicionar um novo consumidor não toque nas camadas intermediárias.
// antes
<Page user={user}><Toolbar user={user}><Avatar user={user} /></Toolbar></Page>
// depois
<UserProvider value={user}><Page><Toolbar><Avatar /></Toolbar></Page></UserProvider>Calcule o estado derivado durante a renderização em vez de armazená-lo - Elimina uma classe inteira de bugs "esses dois estados discordam", tornando a derivação a única fonte de verdade.
// antes
const [items, setItems] = useState<Item[]>([]);
const [count, setCount] = useState(0); // desvia
// depois
const [items, setItems] = useState<Item[]>([]);
const count = items.length;Memorize computações caras com useMemo - Pula trabalho repetido em renderizações causadas por estado não relacionado, transformando um atraso visível de entrada em feedback instantâneo.
const sorted = useMemo(() => bigList.sort(compareFn), [bigList]);Envolva callbacks em useCallback apenas quando passados para filhos memoizados - Mantém os limites React.memo estáveis para que os descendentes pulem rerenderizações em vez de quebrar sua memoização.
const onSelect = useCallback((id: string) => setSelected(id), []);
return <MemoizedList onSelect={onSelect} />;Divida componentes superdimensionados por responsabilidade - Estreita o escopo da rerenderização e o escopo da revisão, para que uma alteração no cabeçalho não cause um diff no rodapé.
// antes: <Dashboard /> de 400 linhas fazendo cabeçalho, filtros, tabela, paginação
// depois
<Dashboard><Header /><Filters /><Table /><Pagination /></Dashboard>Substitua useState emaranhado por useReducer - Centraliza transições relacionadas em uma função para que invariantes possam ser aplicados em vez de espalhados por manipuladores.
const [state, dispatch] = useReducer(cartReducer, initialCart);
dispatch({ type: "add", item });Converta componentes de classe para componentes de função - Desbloqueia hooks, bundles menores e padrões modernos como Suspense e Server Components.
// antes
class Timer extends React.Component { /* lifecycle methods */ }
// depois
function Timer() { useEffect(() => { /* ... */ }, []); return <span /> }Use as const para inferência literal - Fixa valores de string e array em seus tipos literais exatos para que eles fluam através de genéricos em vez de se alargarem para string.
// antes
const roles = ["admin", "user"]; // string[]
// depois
const roles = ["admin", "user"] as const; // readonly ["admin", "user"]Substitua enum por uma união de objetos as const - Produz melhor tree-shaking, JSON mais amigável e tipos mais claros sem as peculiaridades de runtime dos enums do TypeScript.
// antes
enum Status { Open, Closed }
// depois
const Status = { Open: "open", Closed: "closed" } as const;
type Status = (typeof Status)[keyof typeof Status];Levante tipos compartilhados para um módulo dedicado - Evita a derivação de tipos quando a mesma forma é redeclarada em três componentes com campos ligeiramente diferentes.
// src/types/user.ts
export interface User { id: string; email: string; roles: Role[] }Use satisfies para validar sem alargar - Mantém o tipo inferido estreito enquanto ainda verifica se o valor está em conformidade, para que o autocompletar permaneça preciso.
const routes = {
home: "/",
admin: "/admin",
} satisfies Record<string, `/${string}`>;Substitua chaves de índice de array por IDs estáveis - Corrige bugs de reordenação, perda de foco de entrada e glitches de animação causados pelo React reutilizando o nó DOM errado.
// antes
items.map((item, i) => <Row key={i} {...item} />)
// depois
items.map((item) => <Row key={item.id} {...item} />)Substitua fetches de useEffect por TanStack Query (ou SWR) - Obtém cache, deduplicação, retentativas e cancelamento de requisição gratuitamente, excluindo dezenas de linhas de boilerplate de carregamento/erro.
const { data, isLoading } = useQuery({ queryKey: ["user", id], queryFn: () => fetchUser(id) });Valide dados externos com Zod na fronteira - Converte crashes de "undefined is not a function" profundamente na UI em uma única falha de parse explícita na borda.
const User = z.object({ id: z.string(), email: z.string().email() });
const user = User.parse(await res.json());Divida um mega-context em contextos direcionados - Impede que todos os consumidores rerenderizem quando uma fatia não relacionada muda, transformando um aplicativo lento em um ágil.
<AuthProvider>
<ThemeProvider>
<CartProvider>{children}</CartProvider>
</ThemeProvider>
</AuthProvider>Coloque o estado com o componente que o possui - Reduz o escopo de raciocínio e torna a exclusão trivial quando o recurso desaparece.
// antes: estado modal aberto em um store global
// depois: useState dentro do próprio <Modal />
const [open, setOpen] = useState(false);Substitua sopa de props booleanas por uma união variant - Elimina combinações impossíveis como primary && danger && outline no nível do tipo.
// antes
<Button primary danger outline />
// depois
<Button variant="danger-outline" />Extraia a lógica do formulário para react-hook-form + Zod - Remove a agitação de input controlado, centraliza a validação e torna o formulário declarativo em vez de imperativo.
const form = useForm<FormValues>({ resolver: zodResolver(Schema) });
<input {...form.register("email")} />Substitua ternários aninhados por retornos antecipados - Achata o ramificação para que o caminho feliz seja lido de cima para baixo sem manter uma árvore de parse na cabeça.
// antes
return loading ? <Spinner /> : error ? <Error /> : data ? <View data={data} /> : null;
// depois
if (loading) return <Spinner />;
if (error) return <Error />;
if (!data) return null;
return <View data={data} />;Converta operações imperativas de DOM para estado declarativo - Alinha-se com o modelo mental do React para que as rerenderizações não possam anular acidentalmente uma mutação manual do DOM.
// antes
useEffect(() => { ref.current!.classList.add("open"); }, [open]);
// depois
<div className={open ? "open" : ""} />Use encadeamento opcional e coalescência nula - Substitui pirâmides de guarda por uma única expressão que ainda lida explicitamente com os casos nulos/indefinidos.
// antes
const name = user && user.profile && user.profile.name ? user.profile.name : "guest";
// depois
const name = user?.profile?.name ?? "guest";Mova UI estática para um Server Component - Envia menos JavaScript para o cliente e mantém a busca de dados próxima à fonte sem um roundtrip de hidratação.
// app/page.tsx (Server Component por padrão no App Router)
export default async function Page() {
const posts = await db.posts.findMany();
return <PostList posts={posts} />;
}Carregue rotas e widgets pesados de forma preguiçosa (lazy-load) - Mantém o bundle inicial pequeno para que a primeira pintura interativa não espere por uma biblioteca de gráficos que o usuário pode nunca abrir.
const Chart = lazy(() => import("./Chart"));
<Suspense fallback={<Spinner />}><Chart /></Suspense>Substitua React.FC por um tipo de prop explícito - Dá a você controle sobre o contrato children e corresponde ao consenso atual da comunidade sobre tipagem de componentes.
// antes
const Card: React.FC<{ title: string }> = ({ title, children }) => <div>{title}{children}</div>;
// depois
function Card({ title, children }: { title: string; children?: React.ReactNode }) {
return <div>{title}{children}</div>;
}Envolva subárvores arriscadas em um error boundary - Isola o raio de explosão para que um gráfico quebrado não derrube todo o painel.
<ErrorBoundary fallback={<ChartError />}>
<Chart />
</ErrorBoundary>Remova flags de loading emparelhando Suspense com uma biblioteca de dados - Remove branches isLoading em favor de um único boundary de fallback, permitindo que os componentes assumam que os dados estão presentes.
<Suspense fallback={<Skeleton />}>
<UserProfile id={id} /> {/* lê dados via `use` ou uma query suspendendo */}
</Suspense>useMemo/useCallback em todos os lugares adiciona ruído sem ganhos mensuráveis. Correção: memoize apenas após um trace do profiler ou quando um React.memo descendente depende da estabilidade referencial.any de uma vez cria diffs enormes sem mudança de comportamento. Correção: habilite flags de rigor incrementalmente e corrija a derivação na fronteira do módulo.| Alternativa | Use Quando | Não Use Quando |
|---|---|---|
| Codemods (jscodeshift, ts-morph) | A refatoração é mecânica e se repete em centenas de arquivos. | A mudança requer julgamento humano por local. |
| Reescrever "Big-bang" | O código antigo é fundamentalmente inseguro e não há caminho incremental. | Refatorações incrementais são possíveis - quase sempre são. |
| Padrão Strangler Fig | Você está migrando gradualmente de um framework ou padrão legado. | A base de código é pequena o suficiente para ser refatorada em uma única varredura. |
| Comentários de descontinuação + regras de lint | Você não pode refatorar todos os sites de chamada imediatamente, mas deseja impedir novos usos. | O padrão já é totalmente removível. |
React.memo que, de outra forma, rerenderizaria em cada renderização pai.loading: true com data: Foo simplesmente não será verificado pelo tipo.switch exaustivo no discriminador e deixar o TypeScript pegar casos ausentes.error quando o carregamento recomeça - uniões não farão isso.as const compõem naturalmente com satisfies e tipos de literal de template.unknown mais uma função de estreitamento é mais seguro em todos os casos em que any é tentador.any, limite-o a uma única função e comente o porquê - não deixe que ele vaze através das fronteiras do módulo.useEffect para efeitos colaterais verdadeiros no mundo exterior: assinaturas, temporizadores, APIs imperativas.useReducer com ações nomeadas.useRef em vez disso.grep para any, as any, @ts-expect-error e // eslint-disable - eles marcam a podridão.Revisado por Chris St. John·Última atualização: 7 de jul. de 2026
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥