Context vs inversão de controle e composição

"Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult.

If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context.

For example, consider a Page component that passes a user and avatarSize prop several levels down so that deeply nested Link and Avatar components can read it:

It might feel redundant to pass down the user and avatarSize props through many levels if in the end only the Avatar component really needs it. It’s also annoying that whenever the Avatar component needs more props from the top, you have to add them at all the intermediate levels too.

Boa noite!

Olhando a documentação do React na parte de Context, achei o seguinte trecho:

"Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult. If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context.

For example, consider a Page component that passes a user and avatarSize prop several levels down so that deeply nested Link and Avatar components can read it:

One way to solve this issue without context is to pass down the Avatar component itself so that the intermediate components don’t need to know about the user or avatarSize props:"

Isso significa chamar a função que monta o componente onde teríamos as props que seriam passadas. Ou seja, ao invés de passar as props até chegarem no componente que a usaria, passamos o componente em si onde temos essas props até que ele chegue no seu nó.

Então minhas 2 perguntas:

1) Nesse caso, qual a vantagem de chamar a função que monta o componente ao invés de passar as props (entendo que essas props sejam "greedy", mas pq não acontece o mesmo passando o componente)?

2) Por fim, pelo que entendi, isso melhora a reutilização do componente mesmo no caso do Context. Mas como? Qual a vantagem em termos de reusabilidade e desacoplamento de chamar a função que monte o componente ao invés de usar o Context?

Obrigado!

Fala, André! Tudo certo?

Desculpa pela demora!

Ótimas perguntas! Esse assunto de Context vs Composição é bem interessante, e apesar da documentação do React trazer a Composição como uma solução para que você trabalhe com o props drilling (quando há a passagem de props por múltiplas camadas de componentes para que chegue em um componente final, sem necessidade de utilização pelos componentes intermediários), há quem ainda questione essa abordagem.

A vantagem é que, de fato, você elimina essa transferência de props pelos components que não a utilizam, e de fato, garante que a props não passe por componentes que não utilizam elas. Isso dá mais clareza ao seu código, mas esse é justamente o ponto que há certa discussão.

Porque em um cenário simplificado, sim, resolve o problema e deixa bem claro quem usa as props. Mas em um contexto mais complexo, há alguns outros lados negativos, principalmente o aumento da árvore de componentes, já que você precisa passar mais componentes em um mesmo nível.

Esses são os pontos a serem levados entre Composition e Props Drilling. Agora, sobre Context e Composition.

Sim, é verdade que a Composition melhora a reutilização do componente. Isso porque o componente deixa de depender do funcionamento do Contexto. A responsabilidade fica mais centralizada nos componentes.

Entretanto, novamente, esse benefício não deve ser levado como o único objetivo. Algo que é muito importante é avaliar a complexidade da sua aplicação, se a complexidade for grande, talvez Contextos funcionem melhor, e o próprio desacoplamento seja maior com o uso de Contextos.

A mensagem que a equipe do React deixa aí é pelo seguinte motivo: as pessoas costumam pular direto para o Contexto, mesmo quando a complexidade da aplicação é tão baixa que você está tentando resolver um problema pequeno com uma solução grande. Por isso, depende.

Inclusive, é muito bom que você tenha ido até a documentação do React ver sobre isso, justamente porque é uma questão subjetiva e quanto mais cedo você começa a pensar nisso, mais experiência você vai ganhar em relação aos métodos.

Resumidamente, evite sempre Props Drilling, opte primeiro sempre por Composition e, em último caso, não tenha medo de usar os Contexts.

Bons estudos!