dnd kit React: quando parar de remendar o drag and drop nativo

Mover um card na tela é a parte pequena do arrastar e soltar. O que consome a sessão inteira é tudo que cancela o gesto antes de ele virar um drop, e quando o gesto morre sem erro nenhum no console você fica remendando às cegas.

Foi onde Thiago ficou preso ao implementar à mão o arrastar e soltar da agenda de publicações da agência. Testava, o card não arrastava. A IA corrigia e mandava testar de novo. Continuava sem arrastar. Isso se repetiu rodada após rodada, inclusive depois que a IA já tinha achado a causa, e o que sai daí serve para qualquer pessoa que esteja construindo com IA: o sinal de que chegou a hora de trocar código próprio por uma biblioteca dedicada está no padrão da falha, que se repete mesmo com diagnóstico na mão. Correção, teste, falha de novo, e nenhuma mensagem para investigar.

Por que a falha silenciosa é o bug mais caro do vibe coding

Um erro que estoura no console é barato. Ele te dá um arquivo e uma linha. O drop que não acontece deixa a tela igual, o card de volta no lugar, e nenhum ponto de partida.

No vibe coding isso vira uma armadilha específica, porque a IA sempre tem a próxima hipótese pronta. Você descreve o sintoma, ela propõe uma causa plausível, aplica, pede pra você testar. Cada rodada parece a última que faltava. Não existe atrito nenhum para te avisar que você está remendando o mesmo código pela enésima vez, e o custo se acumula em silêncio junto com o bug. Foi o mesmo caminho de vibe coding para reverter codigo quebrado.

As 2 coisas que estavam cancelando o gesto

A IA achou a causa, e não era uma coisa só. Eram 2, somadas, e as 2 tinham a mesma natureza: o navegador cancelava o gesto antes de ele chegar a virar um drop.

A primeira estava no elemento fantasma que segue o cursor durante o arraste. Quando o React redesenhava esse elemento, o alvo que estava capturando o ponteiro sumia do caminho. Do ponto de vista do Chrome, a coisa que ele estava seguindo deixou de existir, então ele encerrava o gesto ali.

A segunda estava no container da agenda, que tem scroll. O navegador interpretava o movimento do mouse ou do dedo como rolagem da lista, e a rolagem tomava o ponteiro para si antes de o arrastar sequer ativar.

Nenhuma das 2 produz erro. As 2 são o navegador reagindo de forma previsível a um gesto ambíguo. É por isso que o debug rodava em círculos: não havia um defeito para consertar no código, havia um gesto que o navegador cancelava por 2 motivos legítimos.

O diagnóstico não encerrou o problema. Com as 2 causas nomeadas, as correções em cima delas foram para o código e o card continuou sem arrastar. Saber por que o gesto morria não fez o gesto sobreviver.

A troca por uma biblioteca dedicada

Foi com a causa já na mão que Thiago cortou o ciclo, dizendo à IA que já tinha perdido tempo demais ali e pedindo para ela atacar o problema de forma mais assertiva, sem retrabalho. O pedido deixou de ser por mais uma tentativa e virou um pedido de solução definitiva.

Dava para continuar remendando: estabilizar o fantasma durante o redesenho e separar rolagem de arraste por um limiar de movimento. Cada um desses tem casos de borda próprios, que aparecem em tela de toque e quando a lista cresce.

A IA propôs o contrário:

Vou trocar por DND kit. Eliminar falhos silenciosos.

O dnd-kit é uma biblioteca dedicada a arrastar e soltar em React. O argumento da troca é econômico: os casos de borda que o Thiago ia começar a descobrir naquele momento já foram descobertos por outra gente, que pagou o preço de descobrir. Manter a implementação própria era assinar embaixo dessa conta inteira, sozinho, por uma feature acessória no produto.

Ele foi buscar material fora da conversa

Com a troca já anunciada, em vez de descrever o mesmo sintoma de novas maneiras para a mesma IA, ele perguntou a um amigo como o drag and drop funcionava no projeto dele, e levou a explicação para dentro da conversa como material. É a parte que mais vale copiar da sessão.

Isso muda o que a IA tem em mãos. Antes, ela gerava hipóteses a partir da descrição de um sintoma. Depois, ela tinha uma implementação que comprovadamente funciona em outro lugar, com as decisões já tomadas por alguém que passou pelo mesmo problema. A IA disse ter aplicado o mesmo padrão do projeto do amigo. Thiago testou, e o drop continuou morrendo em silêncio.

Trazer evidência de fora não fez o card andar na hora, e ainda assim foi a jogada certa: eliminou a suspeita de que faltava saber como se faz e deu à troca de biblioteca uma referência de como o padrão se parece quando está funcionando.

Mais adiante na live ele testa de novo e confirma o arrastar e soltar rodando na agenda. Entre o anúncio da troca e essa confirmação entrou também o padrão do projeto do amigo, então não dá para separar o efeito de uma coisa do da outra e cravar que a biblioteca sozinha consertou. O que o commit da sessão registra é a biblioteca e o teste, junto.

O que fazer com isso amanhã

Conte as rodadas, não as horas: quantas vezes você recebeu uma correção, testou e viu exatamente a mesma coisa acontecer. Se a resposta é "mais de uma" e nenhuma dessas rodadas produziu erro no console, você já saiu do debug e entrou no sorteio de hipóteses. Vale mesmo quando a causa já apareceu, porque a explicação certa e a correção que funciona não são a mesma entrega.

Nesse ponto, troque a pergunta. Sai "o que está errado no meu código" e entra "isso aqui é um problema que alguém já empacotou". Arrastar e soltar é um desses, editor de texto rico é outro: o caminho feliz sai rápido e a cauda de casos de borda não acaba. É um julgamento que a IA não vai tomar no seu lugar, porque ela sempre consegue escrever mais uma correção, e escrever mais uma correção foi literalmente o que você pediu.

Saber a hora de parar de escrever código e começar a instalar código é boa parte do ofício de quem faz vibe coding na frente de todo mundo. A sequência inteira, do primeiro teste que não arrastou até o commit com a biblioteca, dá para assistir à live.