Prop drilling em React

Introdução

Prop drilling corresponde a quando props precisam passar por alguns componentes, antes de chegar aos componentes que realmente fazem uso delas. Na ilustração abaixo, tem-se uma exemplificação desse comportamento:

Em azul: componente que obtém um dado (vou chamar de data durante esse artigo) e passa via props
Em amarelo: componentes que somente repassam a props
Em verde: componentes que fazem uso da props

Problemas

A medida que a informação é repassada por uma quantidade cada vez maior de componentes, antes de chegar nos que fazem uso dela, se encontram os seguintes problemas:

• manutenção de código: uma vez que ocorra uma mudança na props que é passada (por exemplo o nome dela), pode se tornar necessária alteração em todos os componentes por onde ela passa
• entendimento de código: dificulta o entendimento do fluxo de informação e localizar onde ela é utilizada, devido a quantidade de componentes por onde ela percorre
• componentes menos reutilizáveis: adiciona um acoplamento entre componentes, diminuindo a flexibilidade deles

React Context

Uma forma de resolver o problema do prop drilling é o uso de Context, que permite acessar data dentro de uma árvore de componentes sem precisar passar props manualmente por cada nível até chegar aos que fazem uso dela. Segue abaixo a exemplificação desse comportamento:

Em azul: componente que obtém a data e providencia ela
Em verde: componentes que utilizam a data

Exemplo passando props

Fluxo de data:

• ComponentA: tem data e passa via props

import React from "react"
import ComponentB from "./ComponentB"

const ComponentA = () => {
  const data = "Texto do componente A"

  return(
    <>
      //...
      <ComponentB data={data} />
    </>
  )
};

export default ComponentA;

• ComponentB: filho do ComponentA e repassa data via props

import React from "react"
import ComponentC from "./ComponentC"

const ComponentB = ({data}) => (
  <>
    //...
    <ComponentC data={data} />
  </>
);

export default ComponentB;

• ComponentC: filho do ComponentB e faz uso de data

import React from "react"

const ComponentC = ({data}) => (
  <>
    //...
    {data}
  </>
);

export default ComponentC;

Exemplo usando Context

Fluxo de data:

• DataContext: criação do context que vai disponibilizar a data do ComponentA

import { createContext } from 'react'

export const DataContext = createContext()

createContext: permite criar um context que componentes podem providenciar data ou ter acesso a data vindo dele

• ComponentA: tem data e providência ela a partir do Provider de DataContext

import React from "react"
import { DataContext } from "./DataContext"
import ComponentB from "./ComponentB"

const ComponentA = () => {
  const data = "Texto do componente A"

  return(
    <DataContext.Provider value={data}>
      <ComponentB />
    </DataContext.Provider>
  )
};

export default ComponentA;

Provider: para todos os componentes englobados dentro dele disponibiliza o value definido, nesse caso data, não importando o nível do componente

• ComponentC: a partir do hook useContext acessa a data proveniente do ComponentA

import React, { useContext } from "react"
import { DataContext } from "./DataContext"

const ComponentC = () => {
  const text = useContext(DataContext)

  return(
    <>
      //...
      {text}
    </>
  )
};

export default ComponentC;

useContext: para o componente que chama o hook permite acessar o value definido, nesse caso data

Conclusão

A ideia desse artigo é trazer a definição de prop drilling e os problemas provenientes dele, que se intensificam a medida que props vão passando por cada vez mais componentes que não fazem uso delas. Como alternativa foi apresentado o uso de React Context, com o objetivo de mitigar esses problemas.