🚀 MemoIt

Ferramenta CLI para aplicação automática de memoization em projetos React/Next.js

MemoIt analisa seus componentes React e aplica automaticamente React.memo, useMemo e useCallback onde necessário, seguindo as melhores práticas de performance.

✨ Funcionalidades

• 🔍 Análise Inteligente: Detecta quando memoization é necessária
• ⚡ Aplicação Automática: Aplica React.memo, useMemo e useCallback automaticamente
• 📦 Imports Automáticos: Atualiza imports do React automaticamente
• ⚠️ Validação: Identifica problemas que impedem a aplicação de memoization
• 💡 Recomendações: Sugestões para melhorar a performance do código
• 🎯 TypeScript/JavaScript: Suporte completo para .tsx, .ts, .jsx e .js

📦 Instalação

npm install -g memoit

🛠️ Uso

memoit caminho/do/arquivo.tsx

Exemplos

# Componente individual
memoit src/components/Button.tsx

# Página Next.js
memoit pages/dashboard.tsx

# Componente JavaScript
memoit components/Header.jsx

🔧 O que o MemoIt faz

1. React.memo

Aplica React.memo em componentes que recebem props:

// Antes
const Button = ({ title, onClick }) => {
  return <button onClick={onClick}>{title}</button>;
};

// Depois  
const Button = memo(({ title, onClick }) => {
  return <button onClick={onClick}>{title}</button>;
});

2. useMemo

Memoiza cálculos complexos:

// Antes
const expensiveValue = data.filter(item => item.active).map(item => item.value);

// Depois
const expensiveValue = useMemo(
  () => data.filter(item => item.active).map(item => item.value),
  [data]
);

3. useCallback

Memoiza event handlers:

// Antes
const handleClick = () => {
  onSubmit(formData);
};

// Depois
const handleClick = useCallback(() => {
  onSubmit(formData);
}, [onSubmit, formData]);

📊 Exemplo de Saída

🔍 Analisando: ProductCard.tsx

📋 Problemas encontrados:
   ⚠️  Estilos inline detectados - considere mover para objetos externos

📊 Análise de Performance:
   React.memo necessário: ✅ Sim
   useMemo necessário: ✅ Sim  
   useCallback necessário: ✅ Sim

✅ Aplicado: React.memo, useMemo, useCallback
💾 Arquivo atualizado: ProductCard.tsx

💡 Recomendações adicionais:
   • Considere mover objetos inline para fora do componente
   • Teste a performance antes e depois das mudanças
   • Use React DevTools Profiler para medir impacto

⚡ Quando Usar

O MemoIt é ideal para:

• 🎯 Componentes que re-renderizam frequentemente
• 📊 Componentes com cálculos pesados
• 🔄 Componentes filhos de listas
• 🎨 Componentes com muitas props
• 📈 Otimização de performance em produção

⚠️ Validações

O MemoIt identifica e avisa sobre:

• ❌ Arquivos que não são componentes React
• ❌ Estruturas de componente inválidas
• ⚠️ Props sem tipagem TypeScript
• ⚠️ Estilos inline que causam re-renders
• ⚠️ Objetos inline em props

🏗️ Arquitetura

O projeto segue os princípios SOLID e Clean Code:

├── MemoItAnalyzer    # Análise do código (SRP)
├── MemoItTransformer # Aplicação das transformações (SRP)  
├── MemoItValidator   # Validação de estrutura (SRP)
└── MemoItCLI         # Interface de linha de comando (Facade)

🧪 Melhores Práticas

1. Teste antes e depois: Use React DevTools Profiler
2. Não memoize tudo: Apenas onde há benefício real
3. Monitore dependências: Arrays de dependências corretos
4. Valide em produção: Performance real vs desenvolvimento

🤝 Contribuição

1. Fork o projeto
2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

📝 Roadmap

• [ ] Suporte para React 18 Concurrent Features
• [ ] Integração com ESLint rules
• [ ] Análise de performance automática
• [ ] Suporte para styled-components
• [ ] Plugin para VS Code
• [ ] Batch processing de múltiplos arquivos

📄 Licença

Distribuído sob a licença MIT. Veja LICENSE para mais informações.

🙋‍♂️ Suporte

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 💬 Discussões: GitHub Discussions

⭐ Gostou do MemoIt? Deixe uma estrela no GitHub!