Prop Drilling no React com exemplos

O que Prop Drilling?

O "Prop drilling" no React é quando você tem que entregar uma mensagem que precisa passar por várias pessoas antes de chegar no destinatário certo. Imagine que você quer enviar uma informação de um componente para outro, mas essa informação tem que zigzaguear por vários outros componentes no meio do caminho. Você começa passando a informação como uma prop do componente principal para o filho dele. Depois, esse filho passa a mesma informação pro seu filho, e assim vai, camada por camada, até que finalmente a mensagem chega lá no componente que realmente precisa dela.

Metáfora do prédio

Pense que você tá lá no último andar de um prédio querendo bater um papo com seu amigo que tá no térreo. Mas, em vez de gritar diretamente pra ele, você prefere passar a mensagem para o vizinho do andar de baixo. Aí, esse vizinho passa para o próximo, e assim vai indo, de andar em andar, até que a mensagem finalmente chega nas mãos do seu amigo lá embaixo.

Na programação com React, o "prop drilling" é parecido. Se você tem uma informação no componente mais alto (tipo, o último andar) e quer que chegue num mais embaixo (o térreo), essa informação tem que ser passada de um componente para o outro, camada por camada, até alcançar quem realmente precisa dela.

Exemplo de código

Aqui temos um exemplo simples baseado na metáfora do prédio, onde passamos uma mensagem do topo do prédio (componente pai) até o primeiro andar (componente neto), passando pelo apartamento intermediário que é o segundo andar (componente filho).

// Componente Pai (Topo do Prédio)
function Predio() {
  const mensagemParaPrimeiroAndar = "Olá, do último andar!";

  return (
    <SegundoAndar mensagem={mensagemParaPrimeiroAndar} />
  );
}

// Componente Filho (Segundo Andar)
function SegundoAndar({ mensagem }) {
  // A mensagem é passada diretamente através dos props, sem ser usada aqui.
  return (
    <PrimeiroAndar mensagem={mensagem} />
  );
}

// Componente Neto (Primeiro Andar)
function PrimeiroAndar({ mensagem }) {
  return <p>{mensagem}</p>; // Aqui a mensagem finalmente é utilizada.
}

// Para renderizar o componente Prédio (que inicia todo o processo), você o incluiria em sua aplicação da seguinte forma:
function App() {
  return <Predio />;
}

Vantagens e desvantagens

Vamos dividir esse tópico para manter as coisas claras e simples:

Vantagens do "Prop Drilling"

Para aplicações pequenas ou componentes com poucos níveis, o prop drilling é uma solução direta que não requer ferramentas adicionais ou complexidade. Como a passagem de dados é explícita, pode ser mais fácil para novos desenvolvedores entenderem como os dados estão sendo passados e onde são utilizados. Além disso, não é necessário usar bibliotecas de gerenciamento de estado externas para compartilhamento de dados simples, mantendo o bundle da aplicação mais leve.

Com isso em mente, podemos dizer que o "prop drilling" é simples, fácil de entender e livre de dependências externas.

Desvantagens do "Prop Drilling"

Quando sua aplicação começa a ficar grande, mandar dados do ponto A para o ponto B usando props em vários níveis pode complicar bastante as coisas. Fica difícil alterar ou melhorar o código. Outro ponto que vale destacar é que, essa forma de repassar a informação faz com que os componentes fiquem muito dependentes uns dos outros, mesmo quando não precisam saber tanto assim sobre o que o outro está fazendo. Isso acaba indo contra a ideia de manter as coisas simples e reutilizáveis.

Em bases de código complexas, o "prop drilling" pode dificultar o rastreamento da origem dos dados e qual fluxo estão seguindo, como consequência, aumentando seu tempo de debug. Também é importante lembrar que qualquer modificação nos dados pode exigir mudanças em muitos componentes intermediários, tornando as refatorações mais trabalhosas e propensas a erros.

Conclusão

O "prop drilling" pode ser útil em cenários simples com poucos níveis de componentes, mas para aplicações mais complexas e profundas, abordagens como Context API ou ferramentas de gerenciamento de estado como Zustand podem ser mais apropriadas para gerenciar o fluxo de dados de forma eficiente e manter o código limpo e fácil de manter.