Truckmap Web — análise React 19 + Next 16

Snapshot: branch development, version 1.347.0, 2026-05-27.

Stack atual: react@19.2.5, react-dom@19.2.5, next@16.2.6, typescript@6.0.3, App Router, React Compiler ligado.

Resumo executivo

Codebase já em React 19 + Next 16 + React Compiler, mas código ainda escrito como React 18. Maior ganho rápido: corrigir @types/react quebrado (18 vs 19), depois codemod de forwardRef e limpeza de memos manuais agora redundantes.

---

React 19 — oportunidades

1. @types/react desatualizado — bug latente

• react: 19.2.5 mas @types/react: 18.2.12 em devDependencies (package.json:154).
• Tipos novos de React 19 ausentes: ref como prop, use(), action/useActionState types.
• Ação: bump @types/react@^19 + @types/react-dom@^19 (já tá em 19.2.3, só @types/react que tá errado).

2. React Compiler ligado, mas código cheio de memo manual

• next.config.mjs:88 tem reactCompiler: true, babel-plugin-react-compiler: 1.0.0 instalado.
• ~230 arquivos usam useMemo/useCallback, 249 com React.FC/memo. Compiler torna maioria redundante.
• Ação:
  1. Adiciona eslint-plugin-react-compiler pra detectar componentes em "bail-out" (compiler não consegue otimizar).
  2. Remove memos manuais incrementalmente nos componentes verdes.
• Reduz bundle + ruído visual.

3. forwardRef deprecated em React 19

• 48 arquivos com forwardRef (Button.tsx:38, Form.tsx:29, Modal.tsx, Input.tsx, etc).
• React 19 aceita ref como prop normal — forwardRef será removido em versão futura.
• Ação: codemod oficial npx codemod@latest react/19/replace-forward-ref.
• Exemplo src/components/common/Button/Button.tsx:38-109: vira função simples com ref na assinatura, elimina PolymorphicForwardRefExoticComponent.

4. use() hook não usado

• Zero ocorrências de use(promise) ou use(context).
• Casos bons:
  • MapGLContext em src/hooks/useMap/useMapGL/MapGLContext.ts — permite unwrap condicional.
  • TruckOptionsProvider — mesma coisa.
  • Promises servidoras passadas pra client component via Suspense.

5. Form Actions / useActionState subutilizado

• Só 7 arquivos usam useFormStatus/useActionState/useOptimistic/useTransition.
• Toda autenticação/dispatch/settings ainda em react-hook-form.
• Ação: forms simples (login, email confirmation, settings toggle) migram pra Actions + useFormStatus. RHF fica em forms complexos com validação rica (AuthForm, EditTripForm).

6. React.FC legado

• 249 arquivos. React 19 + TS 6 prefere function Component(props: Props) direto.
• React.FC ainda funciona mas reduz inferência de generic + ref como prop.
• Ação: codemod opcional, baixa prioridade.

---

Next 16 — alinhamentos pendentes

7. Sentry 7.55.0 muito antigo

• @sentry/nextjs: 7.55.0 + @sentry/react: 7.55.0 (devDeps).
• Next 16 + React 19 oficialmente suportado em Sentry SDK v8+. SDK atual pode quebrar source maps + perder context.
• Ação: migra pra @sentry/nextjs@^8, remove init de src/app/layout.tsx:21-23, usa instrumentation.ts (padrão Next 16).

8. Node engine 20.x desatualizado

• package.json:8 trava em node: "20.x". Vercel default agora é Node 24 LTS, Node 18 deprecated.
• Ação: bump pra node: ">=22" ou "24.x".

9. vercel.json quase vazio — candidato a vercel.ts

• vercel.json:1-9 só tem 1 rewrite (storybook login).
• Redirects + rewrites estão em next.config.mjs:151-310.
• Ação: migra pra vercel.ts (recomendação atual Vercel) com typing + lógica condicional. Consolida configuração de plataforma.

---

Dependências — duplicação/limpeza

10. Duplicatas evidentes (verificar package.json:50-140)

Pacotes	Recomendação
next-nprogress-bar + nextjs-progressbar	Escolher um
react-input-mask + react-input-mask-next + react-imask	Consolidar em react-imask
lodash + lodash.chunk	chunk já em lodash
heroicons1 + heroicons2 (aliased)	Migrar pra v2-only (HeroIcon.tsx:47-56 suporta ambos)

11. Versões pinadas exatas

• Quase todas deps sem caret. Bom pra reprodutibilidade, ruim pra patches de segurança.
• Ação: npm audit periódico em CI + dependabot config.

---

TypeScript / Lint

12. tsconfig.json frouxo

• tsconfig.json:25,33: strict: false + strictNullChecks: false.
• TS 6 + React 19 vão expor bugs que strict pega.
• Ação: liga gradual com // @ts-strict por pasta, começando em src/lib/ e src/hooks/.

13. ESLint 8 + @typescript-eslint 5.59

• ESLint 9 flat config + @typescript-eslint v8 suportam React 19 melhor.
• Adiciona eslint-plugin-react-compiler oficial.

---

Plano sugerido (ordem de menor risco)

1. Bump @types/react@19 + @types/react-dom@19 — corrige tipos quebrados.
2. Adiciona eslint-plugin-react-compiler — mapeia bail-outs antes de remover memo.
3. Sentry 7→8 + instrumentation.ts.
4. Codemod forwardRef → ref prop (rodar batch, revisar diff).
5. Dedup deps (mask libs, nprogress, heroicons v1).
6. Strict TS por pasta começando em lib/ e hooks/.
7. vercel.ts + consolidar redirects.
8. Substitui forms simples por React 19 Actions.
9. Limpeza incremental de useMemo/useCallback redundantes (pós eslint-plugin).
10. Bump Node engine pra 22+/24.

---

Referências do código

• package.json — deps versions
• next.config.mjs:88 — reactCompiler flag
• src/app/layout.tsx:21-23 — Sentry init (mover pra instrumentation.ts)
• src/components/common/Button/Button.tsx:38-109 — exemplo forwardRef
• src/components/common/Form/Form.tsx:29-57 — exemplo forwardRef + React.FC + RHF
• src/components/common/HeroIcon/HeroIcon.tsx:47-56 — heroicons v1+v2
• tsconfig.json:25,33 — strict desligado
• vercel.json — quase vazio
• src/proxy.ts — Next 16 proxy.ts pattern (correto)