REFATOREI UM CÓDIGO REACT USANDO CLEAN CODE
ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 2024
- ✅ Maratona Explorer: Dê seus primeiros passos na programação.
→ Cadastre-se no link gratuitamente: rseat.in/marat...
Todo ano eu seleciono devs que ainda não tiveram sua primeira oportunidade no mercado de trabalho para atuar como estagiário(a) aqui dentro da Rocketseat. É uma maneira de proporcionar uma primeira experiência profissional que, além de tudo, aplica nosso método de estudo (7-2-1) já comprovado por milhares de alunos.
Nesse vídeo vou mostrar como foi o processo de análise e refatoração do código de um desses mentorados, que desenvolveu o projeto move.it desenvolvida no #NLW4 Vem comigo que vou mostrar o passo a passo de como eu desenvolveria esse projeto usando React.js.
Acesso o repositório do move.it: github.com/roc...
💜 Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat_oficial
Linkedin: @rocketseat
🎧 Nos ouça também no Spotify:
- Podcast Faladev
![AUTOMATIZAMOS A EDIÇÃO DO REELS DO INSTAGRAM [feat. Mayk Brito]](http://i.ytimg.com/vi/i6EcAV0yhqg/mqdefault.jpg)
![AUTOMATIZAMOS A EDIÇÃO DO REELS DO INSTAGRAM [feat. Mayk Brito]](/img/tr.png)
![[TH] 2024 PMSL SEA W2D5 | Fall | พลาดวันนี้ จะต้องเสียใจ](http://i.ytimg.com/vi/A5-Cuo12p6A/mqdefault.jpg)
Caso o cronometro necessite de precisão, usar o setTimeout para medir o tempo não é a melhor forma. O setTimeout não garante que a função seja chamada exatamente no tempo especificado. Ela pode ser chamada depois caso outra função esteja sendo executada no momento. Chamar o setTimeout dessa forma pode ir acumulando erro a cada segundo.
Uma alternativa seria guardar no state a data de início do cronometro usando um Date e a cada iteração calcular o tempo decorrido dessa data. Lembrando que o Date tem precisão de até milissegundo.
O setTimeout seria usado apenas para atualizar a interface. O cálculo do tempo decorrido poderia ser feito subtraindo a data de agora com a data de início. Dessa forma mesmo que o setTimeout tenha passado mais de um segundo o tempo decorrido vai refletir exatamente isso. Ele será o tempo exato entre as duas datas.
Inclusive com essa alternativa ficaria fácil exibir os milissegundos. Seria só chamar o setTimeout a cada 200 ms, por exemplo e adicionar os milissegundos na interface. Da forma do vídeo não daria para chamar o setTimeout a cada milissegundo pra ir decrementando.
Claro que o Diego fez assim pra simplificar, mas só deixando o comentário aqui como curiosidade.
Lembro que nessa NLW eu percebi o mesmo problema, e é pior ainda quando vc vai pra outra aba do navegador
O timeout de 1 segundo pra janela em background demorava tipo, bem mais de um segundo, lembro que comparei com o cronômetro do celular e tava perdendo de um a dois segundos a cada 20, mais ou menos
Eu fiz desse jeito que vc falou, de salvar o tempo inicial, mas isso acabou dando um outro problema (que eu acabei não conseguindo resolver sem uma gambiarra)
O que acontece é que, como o timeout de 1 segundo não executa a cada 1 segundo, tem uma diferença entre a passagem de segundos na atualização da interface e o tempo em si
Na interface acabava ficando no mesmo segundo por dois segundos e dps atualizando de uma vez (resolvi isso colocando um valor menor no timeout, tipo, 100ms, pra compensar esse erro, mas isso acaba executando muito mais coisa do que o necessário)
@@adryelbarros3250 desacoplar a parte que atualiza o valor da data para uma função que faça apenas isso, então seu timeout tocará apenas em executar a função e atualizar os valores na tela
Perfeita colocação, Vinícius!
Boooooooa, mandou muito!
Eu não sou nenhum especialista em JS, mas tinha pensado isso também.
Logo no começo do vídeo, como eu não estava com o PC, pausei para pensar como eu faria. Eu pensei algo assim;
Pegar a data atual com new Date().getTime() que retornaria o valor em ms, então somar com o valor do timer para saber quando a contagem iria terminar.
Tendo isso, a cada setTimeout, eu calcularia o estado atual da contagem subtraindo o valor do final da contagem menos o now.
É tão satisfatório quando voce vê o video e entende TUDO que está sendo feito. Sensaçao de que seu esforço está valendo a pena 😭
realmente mano 😭
Diego você é um cara excepcional, imagino a felicidade desses programadores em ter você como mentor. As vezes a forma como você fala conta muito pra quem tá começando. E o bom educador não é aquele que chega e fala "faz melhor", mas sim aquele que pega e fala "deixa eu te ensinar como ser melhor". Isso faz toda diferença e por isso te admiro tanto.
Poxa, obrigado demais pelo comentário!
Diegao é uma pessoa incrivel. Ainda bem que existem pessoas assim pra nos inspirar e fazer acreditar que vale a pena estar nesse mundão
Poooow, obrigado
Só um aditivo, 250000ms = 250s, aproximadamente 04min10s ☺️
Agora fica a dúvida... porque o cara escolheu esse valor muito aleatório?! kkkkk
@@ViniciusVille Ele deveria ao menos comentar no código ksksksksksk
Ele deve ter achado q era 25 min
ele pode ter conseiderado que 1min = 10s, (porque quase todas as unidades seguem essa padrão DECImal, e o tempo é uma exeção, ent é facil confundir)
porquê 25 minutos é um valor recomendado de produtividade da técnica Pomodoro
Diego eu sou Dev a 10 anos e nunca vi ninguém ensinar da forma que vc ensina, sua didática é muito boa, sempre colocando a mão na massa mesmo, meu primeiro contato com vcs foi agora que o NLW Return indicação de um amigo, e estou achando demais. Parabéns pelo seu trabalho.
Primeira vez que vejo Diego digitar menos de 50 dígitos por segundo. E isso foi sensacional!
Sim mano ele já digitava rápido agora com esse macbook novo mesmo nem carro de formula um alcança. kkkkkkkk
@@fabricio6586 kkkkkk
a babação de ovo é mais rápida ainda
Eu gosto de aprender sozinho porque nao tenho paciencia em assistir video aulas, o diegão e o unico que me prende na tela e assistir seus videos. muito bom conteudo
Esse fig, que lindo cara!!
uma coisa que passou batido, é sempre importante "limpar" o setTimeout/setInterval que foi invocado no useEffect
supondo que o usuário saísse da página de pomodoro faltando 1 min e fosse pra de página perfil, depois de 1 min o timeout executaria o setState que possivelmente já saiu da memória e ocasionaria num erro
Aaaaaah primeira aparição de um membro do EC no vlog! Amei 🤗🎩
QUE SAUDADE DE VOCÊ!!
@Luan Tonin Galvan 😍
eu nem comecei a estudar react ainda e entendi esse vídeo perfeitamente. sua didática é ótima, mano. parabéns!
Muito legal ter usado fail-first e/ou return-first, isso evita muita cascata de else e diminui muito a complexidade cognitiva, além de evitar a execução de código que seria inútil... Topzera!
Quem fez a NLW04 de React/Next lembra bem dessa lógica de countdown!
Ótimo conteúdo pessoal, curtindo bastante esse novo modelo 😍🚀
adorei esse formato descontraído e mesmo assim passou os conhecimentos, gostaria de mais desses conteúdos 🤝🤌
Valeu Welly!
Esse state => state é importantíssimo. Para a performance e warnings no console.
Demais, quero fazer um vídeo só falando sobre closures e como isso funciona no React :)
@@dieegosf boaaa.. Voaa 🚀
Nossa como enrolei para assistir isso e no final era super tranquilo kkkk! Valeu pelo vídeo, eu estou nesse ponto de procurar mais sobre como melhorar códigos que já funcionam... Tanto legibilidade, quanto eficiência
parabens diegon tu é o unico bixo que eu nao preciso colocar no 2.0 pra estudar, obrigado.
Não sei se alguém citou, mas também existe o método Math.trunc(), que ignora as casas decimais e retorna apenas o número inteiro, também iria servir para o exemplo.
Eu nunca te vi analisando um código iniciante. E agora posso dizer com certeza da humildade e maestria que você tem! Com certeza não chegou onde está agora à toa. Parabéns!
Obrigado Josué
Massa esses vídeos estilo vlog. Faz mais ae
Alternativa para screenshot no Linux: Flame Shot
Bem parecido com esse que o Diego apresentou.
Muito bom. Diego queria sugerir para voce fazer uns videos de curtos, por exemplo uns shorts mais ou menos iguais a esse, só que monstrando coisas especificas mais avançadas, entre 10 e 30 minutos... Seria bom demais. Abraço
Muito show Diegão, mesmo já tendo conhecimento consegui captar vários insights para aplicar no dia a dia! Valeu ótimo vídeo
Baita approach, Diego! Top essa atitude de não criticar negativamente mas sim de forma construtiva e com consideração.
oq eh approach?
E eu que nem de frontend sou, mas to aqui curtindo demais seu vídeo! hahaha fera demais
Hahahahah que massa, Rafael!
esse tipo de conteudo é mt massa, da ate pra tirar algumas visoes de leitura de codigo e logica que as vzs nao tive.
Top!!
Amei a sua análise e estratégia!
Esse tipo de vídeo nos ajuda a rever os conceitos e reavaliar nossas estratégias!!
Parabéns!! Já Quero mais!!
Obrigado Eliane!!
Nossa aprendi muito hoje e já parti para 70% 20% 10% criei no expo o CountDown.
Algumas vezes queria ter a mente do Diego para me ajudar em horas de sufoco...
Seria muito massaaa um vlog como esse realizando um projeto de debugging de um projeto. Fica a sugestão!
Por mais vídeos assim! Aprendi muito com essa refatoração, Diegão manda muito!
Esperava um video de clean code, recebi um de dicas para mac kkkkkkk.
Mano, que vídeo FO#!@ !!
Parabéns pela contribuição para comunidade !
Gostaria muito de ver um vídeo sobre algo correspondende às ferramentas apresentas, porém no windows.
Valeuu !
Obrigado Fernando, infelizmente uso pouquíssimo o Windows pra conseguir te indicar algo.
Eu adoraria que o Diego fizesse esse tipo de refatoração com meus códigos XD
Sou fã desse cara, projeto massa eim mano!
Esses videos estilo vlog dele é mt bom
• Muito interessante, e massa essa refatoração 🔥
Muito boa essa aula, já mandei pro pessoal do grupo de estudos. Deve ser uma experiência incrível ter você como tutor. Esse seu projeto de ensinar alguém é algum projeto social seu, Diego?
Acho muito legal esse formato de vídeo fora de estúdio e lidando com coisas do dia a dia. Acompanho a Rocket a um tempo e vocês sempre tão buscando evoluir na proposta de vocês, parabéns.
Isso, é um projeto meu que sigo querendo executar cada vez com mais pessoas. Só não faço mais pelo tempo que preciso dedicar para essas pessoas :)
Faz música diegão ? Vi uma scarlett ali hein ! ótimo vídeo
Que massa! Vou colocar meu código do jogo da velha em C++ que eu fiz há 20 para refatorar kkkk
Eu acho que pra melhorar mais ainda vc teria que ter criado uma variável pra armazenar timeout e qdo o valor chegar a zero vc chamaria clearTimeout com o timeout e tbm no useEffect como clear function (a função q vc retorna no effect). Isso pra garantir q caso o componente seja "desmontado" o timeout tb seja cancelado
Boa, dá pra melhorar muito sim!
Tenho alguns em java e em C, na época em que comecei a programar,. Eram bem pra iniciantes mesmo, gostaria de ver eles na live pra demonstrar como se sairiam hoje.
Pra adicionar sobre o software de multitool de screenshot, tem tambem o ShareX
Meu sonho uma call com o Diego pra ele me guiar no que tenho que evoluir!
Dica boa demais de ferramentas Diegao!!!
Diego é mestre!
Show, Diego! Vc é demais cara :)
Obrigaaaaado
Normalmente a única coisa que é válida no cleancode é quando você tem um projeto e as entidades tem nomes específicos. ex: "Person" para "Pessoa". Uma pessoa terá um "CPF" ou "CNPJ" e não há uma tradução global única para esse tipo de sigla ou referência.
o problema de usar o setTimeout é que a próxima interacao vai comecar depois que a primeira acaba. entao se o codigo pra reduzir o amount demorar 0.001 segundo, a interacao toda vai ter 1.001 segundo, e nao 1 segundo exato. sei q a diferenca é minima mas como queremos fazer um countdown, o certo sao os 25 segundos serem exatos.
o setInterval vai comecar cada interacao exatamente a cada 1 segundo. assim no final dele terao passados exatamente 25 segundos, e nao 25.0025
O Diego é mt impressionante mds
Osh, obrigado
testa o lightshot... tem para windows e mac... muito bom.. e acho mais pratico que o cleanshot
🙂🙂🙂 aprendi muita coisa neste vídeos!! parabéns
Que bom!!
Velhos, já sou dev a algum tempo e sempre que preciso de lógicas com timer ou tempo é sempre um quebra cabeça, mas tive uma experiência com timer que precisava de restart do cronometro quando dava refresh da tela ou reiniciava o sistema ou simplesmente minimizava o navegador usando um técnica chamada worker nativa do javascript.
mt bom conteúdo e dostei demais da ideia de video tipo daily vlog
Esses vlogs estão maneiros demais :D
Vídeo foi tão maneiro que quando eu comecei a ver eu tava com aquele pensamento "vou pôr na playlist assistir mais tarde" mas aí fui assistindo e assistindo e quando me dei conta, o vídeo já tinha acabado kk
Hahahahahahaha acontece, igual os vídeos da galera construindo casas no meio da floresta apenas com gravetos!
Diego me leva e me ensina railroad error handling por favor😩😩😩
Brincadeiras a parte, vídeo muito bom
Melhor formato de vídeo
Gostaria de saber se vocês pegam pessoas acima dos 50 anos que nunca programou... Ando muito de aplicativo 99 e Uber e todos me perguntam porque não tem pessoas que podem ensinar a programar.
Poderia compartilhar onde você geralmente descobre essas ferramentas para macOS?
Isso é no dia a dia. Muito das coisas que ele usa ele da uma star no GitHub. So seguir ele la
Muito massa esse estilo de vídeo!
Se vocês tem projetos react native (versões abaixo de 0.60.x) ou flutter em seus macs não instalem o Fig. A principio pareceu lindo e mágico mas com o 2 dias de uso meus projetos começaram a dar problemas na hora que tentava dar build ou start para instanciar no simulador.
Gostei das dicas dos outros apps mas esse FIG só me deu dor de cabeça =T
No cron já tinha um spoiler do reality hasuhasuhs
Sensacional 👏🏻
Me chama pra ensinar sobre smart contracts 😊
Faz um hook de event listener com typescript!
Muito bom o vídeo 👏👏👏
Na parte do % e padEnd não sabia que existia, seria legal um vídeo falando sobre o % não entendi muito bem o que ele fez.
o operador de % (remainder operator) é usado para retornar o resto de uma divisão, então por exemplo 10 % 3 retornaria 1
Se topar refatorar tenho um jogo feito em javascript e a lib Phaser.
Mas vem cá Diego, esse setTimeout não vai acumular a cada update não???
Utilidade publica, somente começa a refatorar msm no 16:30
Achei que tava jogando watch dogs 14:40
Aquela tosse pós Covid uahsuahsuhas. Ótimo conteúdo.
Cara, com que você descobre esses apps?
Quando vai volta os cursos de programação?
Você diz os NLW, em breve volta aqui :)
Qual seria a melhor abordagem caso eu tivesse botões: Start, Stop e Reset?
Manter um estado chamado isActive e dentro do useEffect verificar se esse estado está como true, dai manter rodando, se não, simplesmente ignorar. No caso do reset precisamos apenas voltar os segundos para o valor inicial ali no estado.
Ideia de refatoração do video, retirar essa parte de curiosidades do mac e ir direto pro clean code
ixi, essas mesas não estão no padrão da NR17.
muito bom!!
Quero aprender a programar
Entra no Discover rocketseat.com.br/discover
Pq quando o Diego clara a const "countdown initial time in seconds" ele declara tudo em maiúscula e usando sneaker_case convention?
Porque essa é uma convenção pra declarar constantes globais e imutáveis (algo que sempre terá aquele valor em todas as fases da aplicação)
Muito bom, duvido refatorar um código meu kkkkkkk
Muito bom
Como funciona pra conseguir trabalhar na sede do Google como o Diego sempre curte fazer? 😄 Não é qualquer dev que consegue, é?
ele não esta no google, esta no cubo Itaú, é um local para aceleração de startups e network, semelhante ao Google for startups, não sei como funciona no cubo, mas no google pode ir qualquer um, basta preencher um formulario no site do google for startups
@@FelipeRibeiroguitar muito obrigado!
@@FelipeRibeiroguitar O Cubo é um coworking, a empresa precisa passar uma entrevista e depois pagar mensalmente o número de cadeiras
Então, quanto aos apps de calendário e reuniões n sei. mas no Linux o zsh+zinit faz isso com muita facilidade!
(Fiquem longe do ohmyzsh)
Por que ficar longe do ohmyzsh?
Sugestão: inventário de rpg tipo o do minecraft. Com Drag and drop
Essa ferramenta de captura me lembra do FlameShot, quando eu estava usando linux, para linux ainda não achei um melhor. xD
1 setInterval vs. 1500 setTimeout...
Você poderia só ter usado o setInterval...
Diego... paga para mim $$$$
HAHAHA
Qual tema o diego está usando no vs code?
Omni
@@dieegosf Ty
Gatinho 🐱
Daria para usar o RETURN do useEffect para verificar se o valor do secondsAmount é igual a 0.
ou não?
tu pode usar uma expressão, secondsAmount == 0 && return...
tu é mt bom kkkkkkk
Fala galera, muito bom o vídeo, fiquei só com uma dúvida, no uso do uppercase para declarar a const dos segundos iniciais, é alguma convenção/regra?
Sim. É uma convenção bem comum. Se tratando de constantes com valores explícitos e imutáveis como no caso do exemplo. Algo q sempre vai ter aquele valor durante todo ciclo da aplicação.
@@decovitorio perfeito sua explicação, muito obrigado 👊🏻
Falaa Diego! Qual é a versão e o ano do seu MAC?
Mac M1 Max 2021.
diego, e você?
quando tu vais ter mentoria pra aprender a ser estiloso ?
vai lá na zara rapá kkk brinks ta amigo
video ta muuuito bom. Só faltou vc beber uma aguinha pra n ficar esse barulho de boca colando que acaba dando uma agoniadinha
oxi... pra que dar o nome da constante e depois o comentário? Era só dar o nome de COUNT_DOWN_TWENTY_FIVE_MINUTES.
Se alguém puder responder, pq o curso de NodeJS no Ignite é todo feito com classes e não usando paradigma funcional ? To meio que quebrando a cabeça pq fiz vários cursos de NodeJS e todos fizeram API de forma totalmente diferente da feita no Ignite, isso está me deixando confuso.
Porque o IGNITE nao está te passando apenas conhecimento de NodeJs. No IGNITE você tem um curso de programação Orientada objetos, com Solid, TDD entre outros, é completo amigo.
Se fosse só para executar métodos com funções não atenderiam para os conceitos acima passados. Na minha opinião é isso e acho fantástico. Aprendi mais do que na minha graduação logo se acostuma!
@@franciscomenezes6970 Sinto muito que sua graduação foi superada por um curso de 36 horas :(, mas se o curso ajudou então tudo bem.
@@franciscomenezes6970 excelente colocação. No ignite você aprende arquitetura, padrões de projeto, solid, etc. De uma forma que é aplicável no mercado visando maior escalabilidade. Eu sinceramente acho que ele é um ótimo curso.
@@andreaugusto3851 nao quis dizer que é melhor do que uma graduaçao longe disso so quis dar um exemplo para tentar ajudar na sua pergunta, desculpe se não era o que gostaria de ouvir!
@@andreaugusto3851 huaehuehuahuehue sim, com certeza. Poem o curso de 36hrs no github e portifolio e espera sentadinho :)