Criei um "Fiscal de Performance" para ESLint (que pega useMemo falso, ReDoS e .filter() lento)

E aí, pessoal do TabNews!

Recentemente, eu me propus um desafio pessoal: mergulhar fundo no ecossistema do React, a ponto de contribuir com uma correção de bug no core deles. Foi uma experiência intensa, que me levou a mexer com uma codebase, assinar CLA e entender o fluxo de CI/CD da Meta.

Mas foi durante esse processo que uma nova ideia surgiu...

Uma coisa é consertar um bug. Outra, completamente diferente, é fazer seu código ser aceito pelo pipeline de testes de um projeto daquele tamanho. O eslint, o prettier, o flow... todos aqueles "robôs" não estavam lá só por estilo. Eles estavam lá para garantir qualidade, segurança e performance.

Foi ali que a ficha caiu: O ESLint é uma das ferramentas mais poderosas que temos, mas a maioria de nós o usa só para "ponto e vírgula".

Eu percebi que a minha contribuição para o React tinha me ensinado a usar as ferramentas, mas eu queria mais: eu queria construir essas ferramentas.

Por que o "Perf Fiscal"?

Eu fiquei obcecado com a ideia de "falsas otimizações": aqueles pedaços de código que a gente acha que estão performáticos, mas que na verdade são piores.

O eslint-plugin-perf-fiscal nasceu dessa obsessão.

Eu não queria mais um linter de estilo. Eu queria um auditor de performance chato, pragmático e "fiscalizador", que vivesse no meu editor e me impedisse de escrever código lento ou perigoso.

Depois de alguns dias de trabalho intenso (e de aprender a criar regras de linter do zero com TypeScript), a v0.1.0 está no ar.

Minha "focalização inicial" foi em 3 regras que eu considero de altíssimo impacto:

1. perf-fiscal/prefer-array-some

• A dor: Ver .filter().length > 0 em todo lugar.
• O que o fiscal faz: Avisa e oferece um Auto-Fix 💡 para trocar por .some(), que é ordens de magnitude mais rápido por não alocar um array novo e parar no primeiro "match".

2. perf-fiscal/no-unstable-usememo-deps

• A dor: A "falsa otimização" mais clássica do React. O useMemo(() => ..., [ {} ]).
• O que o fiscal faz: Ele detecta que a dependência ({} ou [] ou () => {}) é instável (recriada a cada render) e te avisa que sua "memoização" não está servindo para nada.

3. perf-fiscal/no-redos-regex

• A dor: Regex perigosas como (a+)+$.
• O que o fiscal faz: Essa é uma regra de segurança. Ela usa uma biblioteca de análise para detectar padrões de Regex vulneráveis a ReDoS (Denial of Service), que podem travar sua aplicação inteira.

---

Meu Convite

Este projeto é o resultado direto da minha jornada de "devorador de conteúdo" para "contribuidor" e agora "criador".

Eu acabei de publicar!

• GitHub (Onde o projeto vive, com o README.md completo): https://github.com/ruidosujeira/perf-linter
• NPM (Para instalar): https://www.npmjs.com/package/eslint-plugin-perf-fiscal

Se você, como eu, também se irrita com código "preguiçoso" ou "falsas otimizações", dê uma olhada e me diga o que pode ser melhorado ou implementado.