O Anti-Pattern mais comum no ReactJS (e como evitá-lo)

Рет қаралды 8,867

Күн бұрын

Пікірлер: 53

@devjunioralves 8 ай бұрын

👉 Aprenda mais sobre Patterns: Padrões de projetos (Design Patterns): amzn.to/49JVegZ Use a cabeça! Design Patterns: amzn.to/3xDlBaV Aprenda React Hooks amzn.to/3vPTcOp Tao of React amzn.to/4auM9JY React: Conceitos chave amzn.to/49xWow1 Lógica de Programação e Algoritmos com JavaScript: amzn.to/48Cj65Z JavaScript: O Guia Definitivo: amzn.to/48jh9vp Como ser um programador melhor amzn.to/48WYGVj Arquitetura Limpa (Clean Arch) amzn.to/3Viqw7v Clean Code amzn.to/3hHXVKY Estruturas de dados e algoritmos com JavaScript amzn.to/49FOzFd --- ✅ Segue lá no Instagram: instagram.com/devjunioralves/ ✅ Nossa comunidade no Discord: discord.com/invite/bVxW4Dhgrf

@Leanst. 5 ай бұрын

pois é, eu qdo comecei a aprender react, o primeiro exemplo que o prof deu foi esse aí, de colocar a function dentro do componente, eu achei estranho já que este tipo de coisa não fazia muito sentido na perspectiva de componentização, não dá pra fazer nada com aquilo ali dentro. Acho que nem pra didática e ensino deveria ser usado pois pode ensinar o aprendiz a pensar de forma errada, coisa que ele só descobrir meses ou até anos depois que estava errado.

@kevinferreira6279 8 ай бұрын

Poderia fazer um video sobre melhores praticas usando React Query ou o SRW ?

@ArthurBarros-p2j 6 ай бұрын

Acredito também que separando seja a melhor opção, porem, em alguns casos crio dentro do meu componente, mas memorizando, pelo fato do componente memorizado utilizar muitas propriedades do componente pai e pra evitar passar vaaaarias props escolho por criar dentro do mesmo componente.

@LucasLima-ri2tr 6 ай бұрын

talvez se o seu componente tenha que passar vaaaaarias props seja um sinal que ele precise ser componentizado melhor, dá uma olhada no composition pattern, ele ajuda nessa questão

@CarlosSilva-hy8xt 8 ай бұрын

nas minhas aplicações separo meus componentes em dois tipos, genéricos e específicos, os genéricos são os Paragraph, Input, Image e etc, os específicos já são listas, ou partes com logica que desacoplo pra não poluir a interface com logicas diferentes no mesmo lugar, a desvantagem é que cria mt arquivo, mas pra debugar é mt mais simples pq cada logica fica separada, logica de incrementar, logica de fazer um POST, logica de salvar imagens do usuário, e por ai vai, n importa se a lógica é pequena, separo do restante pq são coisas diferentes e n devem uma interferir na outra ou depender da outra.

@devluanvictor 8 ай бұрын

Já fiz muito isso no início, haha! Ótimo vídeo.

@devjunioralves 8 ай бұрын

No começo, quando estamos aprendendo, é normal, o problema é quando a pessoa tem mais experiência e continua fazendo esse tipo de coisa kkkk Valeu man!

@CaioLemos-GraduacaoNerd 8 ай бұрын

Antes o problema fosse só a criação de um componente dentro de outro. O pior é quem cria funções tipo const renderInput = () => A pessoa acha que tá trabalhando com Vanilla JS. Fica horrorosa a leitura, além da performance. E ainda na hora de chamar no jsx, nem utiliza estrutura de componente, chama a função direto no meio do HTML

@devjunioralves 8 ай бұрын

Realmente isso é uma péssima pratica pensando em legibilidade do código. Já trabalhei em projetos que tinha esse tipo de atrocidade kkkk

@CaioLemos-GraduacaoNerd 8 ай бұрын

@@devjunioralves na empresa que eu trabalhei eu vi o tech lead que se gabava de fazer feature mt rápida fazer isso 💀💀💀

@DcKPedro 8 ай бұрын

E se utilizarmos sub-components ? esta abordagem seria uma boa pratica ? ou continuaria com o mesmo problema ?

@devjunioralves 8 ай бұрын

Como seria esses sub components?

@DcKPedro 8 ай бұрын

@@devjunioralves Seria uma abordagem semelhante a biblioteca Bootstrap onde teriamos um componente principal. ex: e a partir deste componente poderiamos acessar outros adicionando ponto e o nome do componente. ex:

@renanloureiro9564 8 ай бұрын

@@DcKPedro Nome disso é composition

@mateuscarvalhodev 8 ай бұрын

Mas um vídeo excelente! 👏👏👏 Uma duvida, vale a pena fazer uma aplicação em next inteira com client-side apenas? Sem o uso do SSR?

@devjunioralves 8 ай бұрын

Na minha opinião, não faria muito sentido, pois um dos maiores motivos em utilizar o Nextjs é justamente o SSR. Além disso, mesmo não usando, a complexidade de entender que o código, mesmo “client side” ainda é executado primeiro no servidor existe e precisa ser levada em consideração.

@ryuga2486 8 ай бұрын

Qual nome da extensão que conta os re renders?

@welingsonsantos9572 8 ай бұрын

Eu já tava pensando "mds o que que to fazendo de errado de novo??" mas vi que isso ai nunca fiz KKKKK ufa

@JuniorTeixeiraDev 8 ай бұрын

Se ele tivesse fora ali do componente principal então seria válido?

@devjunioralves 8 ай бұрын

Sim, não iria ter o problema de performance que mostro, porém, é importante lembrar do Single Responsibility do SOLID, para não agrupar coisas que mudam por motivos diferentes.

@RenanSantos7 8 ай бұрын

Um dúvida minha: se eu itero um array gerando várias instâncias de um componente eu preciso da key. Mas pq eu não preciso disso se eu estiver chamando esse mesmo componente várias vezes?

@versaleyoutubevanced8647 8 ай бұрын

por que com o map vc n consegue definir a ordem deles, e quando voce chama eles manualmente, vc ta definindo a ordem, assim ele consegue saber onde cada elemento tava no render passado e fazer otimizações pro próximo

@devjunioralves 8 ай бұрын

Exatamente o que o @versaleyoutubevanced8647 comentou! Perfeito man.

@RenanSantos7 8 ай бұрын

@@versaleyoutubevanced8647 valeu!

@Rafael-mm7dm 8 ай бұрын

Júnior, em relação a performance, é melhor gerenciar estado dentro do componente ou emitir a alteração do estado para a página, atualizar e passar via prop para o componente? Nao sei se no react tem como emitir como no vue, mas talvez seja válido esse questionamento no react

@devjunioralves 8 ай бұрын

Gerenciamento do estado no React é dentro do componente, a não ser que você utilizei um gerenciador de estado global, como Zustand, Redux... Sobre as props, quando um prop atualiza, o React vai re-renderizar o componente.

@fillipeamg5877 8 ай бұрын

Quem mais entrou pela thumb achando q o problema era setState no onChange?

@devjunioralves 8 ай бұрын

Kkkkkkk easter egg

@teliiz 8 ай бұрын

o que seria o 'use client'? Essa sintaxe nao seria do next?

@devjunioralves 8 ай бұрын

Isso, é do NextJS, é uma diretiva que informa que esse componente vai ser hidratado no client side.

@jsdev5362 8 ай бұрын

me senti muito senior em nunca ter feito essa gambi kkkkkkkkkkkkkk

@devjunioralves 8 ай бұрын

KKKKKKKK boa, pq já vi muito esse tipo de coisa viu kkk

@JeanFeitani 8 ай бұрын

sim kkkkkk, tbm nunca nem passou pela minha cabeça que isso existia, agora vi algo que não pode ser desvisto

@rodrigoadachi 8 ай бұрын

Showw🎉 Cara esse browser que tú usa é top

@marqssss 8 ай бұрын

Seu curso tá na udemy ou apenas no hotmart?

@devjunioralves 8 ай бұрын

Está na hotmart Davi.

@gmartins-dev 8 ай бұрын

@@devjunioralves tem como fazer um periodo de teste? outra coisa, vc da aula particular/monitoria?

@evertonf.costasouza3692 8 ай бұрын

Que extensão é essa que vc utiliza para mostra o resultado do console direto no vscode

@crisgonn 8 ай бұрын

Acho que é o console ninja

@aleee8048 8 ай бұрын

Opa, cara parece que ao digitar qualquer caráctere no seu vscode tem uma transição de duração mt pequena, que torna a escrita mais fluida / parece q tem alguma animação ao digitar, isso seria alguma extensão? Ou eu estou louco? Kkkk achei bem diferente, primeira vez q vejo uma digitação tão fluida

@bernardomendesreis2979 8 ай бұрын

Ótimo vídeo!

@devjunioralves 8 ай бұрын

Valeu Bernardo!

@keke-i9w 8 ай бұрын

Sem conta com teste. Fica mt ruim de testar. Dica perfeita

@devjunioralves 8 ай бұрын

Exatamente, não é simples testar esse tipo de componente.

@luizAugustoll 8 ай бұрын

Nem sabia que isso era um comum, nunca nem vi ninguém utilizando. Imagino que isso seja pra forçar o uso dentro daquele componente específico, não vejo outro motivo. Sempre criava um subcomponente fora do componente quando não queria usar um arquivo separado porquê provavelmente não iria ser reaproveitado fora daquele contexto.