sergiodxa/frontend-react-best-practices

O que frontend-react-best-practices faz?

Diretrizes de otimização de desempenho React. Use ao escrever, revisar ou refatorar componentes React para garantir padrões adequados de renderização e bundle. Aciona em tarefas envolvendo componentes React, hooks, memoização ou otimização de bundle.

Como usar

Siga as práticas recomendadas abaixo ao trabalhar com componentes React para garantir desempenho ótimo:

• Memoização: Utilize React.memo para evitar re-renderizações desnecessárias de componentes. Combine com useMemo e useCallback para memorizar valores e funções.
• Lazy Loading: Implemente React.lazy e Suspense para carregar componentes sob demanda, reduzindo o tamanho do bundle inicial.
• Code Splitting: Use ferramentas como Webpack ou Vite para dividir o código em chunks menores, carregados conforme necessário.
• Evite renderizações excessivas: Identifique e removie causas comuns de re-renderização, como props mutáveis ou estados não utilizados.
• Hook Optimization: Evite criar funções ou objetos dentro do corpo de hooks sem memoização. Prefira useCallback e useMemo.

Exemplos práticos

Componente com memoização

import React, { memo } from 'react';

const ListItem = memo(({ item }) => {
  return <li>{item.name}</li>;
});

export default ListItem;

Lazy loading

import React, { Suspense, lazy } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Carregando...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

Triggers

Este skill é ativado automaticamente em tarefas que envolvam:

• Escrita ou revisão de componentes React
• Criação ou modificação de hooks
• Implementação de memoização (React.memo, useMemo, useCallback)
• Otimização de bundle (lazy loading, code splitting)

Plataformas suportadas

• Claude Code
• Cursor
• Codex (GitHub Copilot)
• Qualquer assistente de IA para desenvolvimento frontend

Contribuição

Contribuições são bem-vindas! Sinta-se à vontade para abrir issues ou pull requests no repositório oficial.