Esse PATTERN do React vai te salvar | React Composition

[@devjunioralves]

INFORMAÇÕES IMPORTANTES 👇 Aprenda mais sobre Design Patterns no React.js: kzbin.info/www/bejne/haCsiWmYgJh_otU Promoções do dia: Hábitos Atômicos amzn.to/3FGllIM Estruturas de dados e algoritmos com JavaScript amzn.to/3hM0L1u Aprendendo a Aprender amzn.to/3WxM0hG

[@raphael.portela]

qual extensao mostra o numero de renders?

[@lucaspaixao8107]

Muito bom, essa do children não causar re-render quando vindo de props eu não sabia. Top!!

[@felipemaxrosa]

Isso Lucas, como no exemplo o Children contem um dado estatico, ele nao vai causar o re-render, mas se ele contivesse algum estado que alterasse, sim... ele causaria um re-render

[@devjunioralves]

É muito show né Lucas?! Perfeito o que o Felipe disse!

[@nadilsonjrt]

Vídeo excelente! Obrigado! 👏

[@devjunioralves]

Muito obrigado Nadilson!

[@rochadaniel1983]

Conteúdo excelente, parabéns!

[@devjunioralves]

Valeu Daniel!!!

[@half7752]

muitooo bom junior, esses conteúdos mais avancados são demais! me recomenda por favor algum curso com conteúdo avançado de react/next que traga conteúdos parecidos com o dos seus vídeos, como boas práticas, patterns, solid, testes e coisa assim. valeeeu

[@devjunioralves]

Valeu demais Rafa! Cara, sobre curso, eu to estudando bastante pra trazer um conteúdo bem atualizado sobre o Next.js, nesse padrão que gosto de trazer aqui no canal, explicando bem os conceitos.

[@gabriel-xc8hp]

Conteúdo de primeira qualidade.

[@devjunioralves]

Valeu demais Gabriel!

[@rivaldoplay]

Perfect!! Sério, muito bom!

[@devjunioralves]

Valeu Rivaldo!!!

[@gabrielcostadev]

Como o NextJS tem sofrido bastantes atualizações, é difícil se manter atualizado, principalmente pra quem está entrando no mercado agora. Vc pretende lançar um curso de Next JS abordando conceitos antigos e novos?

[@devjunioralves]

Realmente, estão à todo vapor lançando muitas novidades. Sim, estou criando um curso onde quero criar uma aplicação real para explicar conceitos chave do Next.js.

[@PhilippeCastro]

muito bom, como chama o plugin que vc usa pra contar as renderizações no vscode ?

[@devjunioralves]

Chama console ninja, é para mostrar o console log no VSCode, tem um vídeo aqui no canal onde mostro minhas extensões, confere lá, tu vai curtir Philippe!

[@emanoelinfinity]

O prop drilling pode ser um problema comum no ReactJS, mas há várias maneiras de resolvê-lo, como o useContext ou gerenciamento de estado com bibliotecas de terceiros.

[@devjunioralves]

Exatamente Emanoel!!!

[@half7752]

vim experimentando esse pattern nos últimos dias e me surgiu uma dúvida, nos casos da utilização do pattern para eliminar o prop drilling, ele deve ser usado desde o início ou apenas quando se tornar um problema? tipo perfurar mais de 2 componentes? no caso de um component Post, seria válido usar composition para os botões de ações? ou passar o event handler como prop? 1

[@devjunioralves]

Boa pergunta Rafa, a gente sempre tende a fazer otimizações prematuras, então é importante ficar ciente disso. Se não estar ocorrendo prop drilling, não tem problema. E outra coisa é ter em mente essa duas abordagens, pois dependendo do caso, uma faz mais sentido que a hora. Exemplo, se você tiver um componente pai que precisa "escutar" atualizações no estado do componente filho, tu vai precisa utilizar callback handler. Agora, se tu precisa desacoplar um componente de outro (deixa-lo genérico), esse patter vai te ajudar.

[@raphael.portela]

To com uma tarefa de criar 4 componentes que possuuem filhos semelhantes, mas que mudam em relação aos dados que irão receber, o layout é quase o mesmo, alguns tem pequenas mudanças nos filhos, to pensando em fazer 1 wrapper , 4 componentes que vao ser os filhos e um hook pra lidar com as consultas graphql e retornar os dados para cada tipo . Nesse caso to respeitando a single responsability? se eu tivesse que dividir tudo, faria 4 pastas com os componentes filhos que seriam renderizados pelo wrapper

[@silasbispo01]

Bom demaise ❤

[@devjunioralves]

Valeu! 👊

[@gutaoplays4342]

Que aula

[@devjunioralves]

Valeu Gutão!!!

[@gabrielbroder2161]

só uma correção que me trouxe um pouco de confusão no início. Ele não é uma prop ele agora é um child component só que da forma mais correta

[@devjunioralves]

O children também é uma prop, Gabriel. Mas entendi o que quis dizer, pois ele é uma prop "diferenciada" por assim dizer kkk

[@gabrielbroder2161]

@@devjunioralves sim. Normalmente nas respostas do stak overflow eles não chamam de prop

[@isonhar]

top

[@devjunioralves]

🚀

[@felippealmeida8075]

entao ele deixou de ser um componente acoplado na definicao, e passou a ser um componente passado por injecao de dependencia, isso mesmo?

[@devjunioralves]

Isso Felippe! Esse é um pattern extremamente util e agora, no Next.js 13 com RSC, vai ser ainda mais.

[@leandrosoares6]

Era o que eu tava concluindo kkkk. Legal demais o conteúdo. Tenho aplicado muito isso, é só fazer uma analogia similar à uma instanciação de uma classe qualquer em Java por exemplo, manipulando um componente dentro de outro é o mesmo que instanciar uma classe dentro de outra, é bom analisar se quem tá chamando deve ter essa responsabilidade mesmo.

[@devjunioralves]

@@leandrosoares6 Kkk Perfeito Leandro!

[@cauabelodi2187]

Opa, como funciona essa renderização dentro do componente como tag?, sou iniciante e não entendi como a prop foi renderizada colocada dentro do

[@devjunioralves]

Fala Cauã! Tu diz renderização via children props? Tu consegue criar componentes React com essa prop "especial" que é children, ou seja, tu consegue passar um filho para o componente, como mostro mais pro final do vídeo.

[@cauabelodi2187]

@@devjunioralves Opa, se não me engano acho que não é isso, não entendi como em: como o React entende que esse Children é a prop passada?

[@devjunioralves]

@@cauabelodi2187 Quando cria um componente, por baixo dos panos tu chama a função createElement do React, é através dela o React sabe o que são as props e o que é o children.

[@Ale-Neves]

Showww

[@michaelcaxias]

top demais o video, que extensão vc usa pra ver as renderizacões no código? que nem tu fez nessa parte: 10:25

[@morganaribeiro8162]

A extensão que acho você se refere é a Erro Lens. No vídeo ela que mostra o resultado do console.log() dentro do VsCode. Espero ter ajudado.

[@michaelcaxias]

Essa aí eu sei e utilizo, a que eu me refiro é a que mostra quantas vezes aquela renderização foi feita, mas muito obg @@morganaribeiro8162

[@sloowy9127]

que tema é esse?

[@devjunioralves]

Chama illusion, tem vídeo aqui no canal onde mostro tudo que utilizo no VSCode, confere lá, tu vai curtir. 😄

[@joseaugustofbneto2194]

muito bom , toma likke

[@lucianoalvsdm]

Uma outra forma de resolver esse problema com re-renders é utilizando o hook de performance memo na hora de exportar o componente. Ele vai verificar se o componente teve ateração nas props se sim ele realizará um no re-render.

[@devjunioralves]

Sim, porém isso tem um custo. O memo (assim como outros) precisa checar se houve alteração ou não para recriar componente. Utilize o memo em último caso.