REFATOREI UM CÓDIGO REACT USANDO CLEAN CODE

✅ Maratona Explorer: Dê seus primeiros passos na programação.
→ Cadastre-se no link gratuitamente: rseat.in/maratona-explorer
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/rocketseat-educati...
💜 Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat_oficial
Linkedin: @rocketseat
🎧 Nos ouça também no Spotify:
- Podcast Faladev

[@viniciuspjardim]

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.

[@adryelbarros3250]

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)

[@verttt_]

@@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

[@danielmello1993]

Perfeita colocação, Vinícius!

[@dieegosf]

Boooooooa, mandou muito!

[@brasilpowergames]

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.

[@lucaslima7759]

É 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 😭

[@Felipe-jf5dx]

realmente mano 😭

[@felipematheus3691]

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.

[@dieegosf]

Poxa, obrigado demais pelo comentário!

[@andremelo7254]

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.

[@vitorpereira7606]

Por mais vídeos assim! Aprendi muito com essa refatoração, Diegão manda muito!

[@rafaeljuniorize]

Diegao é uma pessoa incrivel. Ainda bem que existem pessoas assim pra nos inspirar e fazer acreditar que vale a pena estar nesse mundão

[@dieegosf]

Poooow, obrigado

[@welingtonwel8799]

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

[@carlos50965]

Muito show Diegão, mesmo já tendo conhecimento consegui captar vários insights para aplicar no dia a dia! Valeu ótimo vídeo

[@gabz3309]

eu nem comecei a estudar react ainda e entendi esse vídeo perfeitamente. sua didática é ótima, mano. parabéns!

[@vikstu6816]

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

[@PedroHenriqueTSI]

Ótimo conteúdo pessoal, curtindo bastante esse novo modelo 😍🚀

[@JProtheusOFFICIAL]

esse tipo de conteudo é mt massa, da ate pra tirar algumas visoes de leitura de codigo e logica que as vzs nao tive.

[@juniormartinxo]

Só um aditivo, 250000ms = 250s, aproximadamente 04min10s ☺️

[@ViniciusVille]

Agora fica a dúvida... porque o cara escolheu esse valor muito aleatório?! kkkkk

[@erykfontes267]

@@ViniciusVille Ele deveria ao menos comentar no código ksksksksksk

[@sooslokosvivem]

Ele deve ter achado q era 25 min

[@personagenscantandoraps]

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)

[@victortaveirarodrigues8032]

porquê 25 minutos é um valor recomendado de produtividade da técnica Pomodoro

[@italogdm]

Massa esses vídeos estilo vlog. Faz mais ae

[@gabrielbugarelli]

Primeira vez que vejo Diego digitar menos de 50 dígitos por segundo. E isso foi sensacional!

[@fabricio6586]

Sim mano ele já digitava rápido agora com esse macbook novo mesmo nem carro de formula um alcança. kkkkkkkk

[@JulioDevUnreal]

@@fabricio6586 kkkkkk

[@carlacp8230]

a babação de ovo é mais rápida ainda

[@welly7973]

adorei esse formato descontraído e mesmo assim passou os conhecimentos, gostaria de mais desses conteúdos 🤝🤌

[@dieegosf]

Valeu Welly!

[@Felipe-dd8sh]

Seria muito massaaa um vlog como esse realizando um projeto de debugging de um projeto. Fica a sugestão!

[@fellipeemanoel3040]

Dica boa demais de ferramentas Diegao!!!

[@rhalfoliveira]

Esse fig, que lindo cara!!

[@elianespsilva]

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!!

[@dieegosf]

Obrigado Eliane!!

[@igoroliveira3015]

Esses vlogs estão maneiros demais :D

[@bpuzoni]

Quem fez a NLW04 de React/Next lembra bem dessa lógica de countdown!

[@samuelcustodiodasilva4470]

Esses videos estilo vlog dele é mt bom

[@ezequiel9707]

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

[@gabrielperuchi6462]

Muito massa esse estilo de vídeo!

[@stan9527]

parabens diegon tu é o unico bixo que eu nao preciso colocar no 2.0 pra estudar, obrigado.

[@omouravictor]

Melhor formato de vídeo

[@mathsena007]

Diego é mestre!

[@maykelsantos5501]

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.

Sensacional 👏🏻

[@mekimilan]

Pra adicionar sobre o software de multitool de screenshot, tem tambem o ShareX

[@jeffersonfelixdev]

Que massa! Vou colocar meu código do jogo da velha em C++ que eu fiz há 20 para refatorar kkkk

[@guilhermetrocatti1873]

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!

[@protagonistastech]

Aaaaaah primeira aparição de um membro do EC no vlog! Amei 🤗🎩

[@luantoningalvan8512]

QUE SAUDADE DE VOCÊ!!

[@protagonistastech]

@Luan Tonin Galvan 😍

[@plusnascimento4537]

Muito bom o vídeo 👏👏👏

[@TimeToListenBR]

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...

[@reginaldoboeke871]

Alternativa para screenshot no Linux: Flame Shot Bem parecido com esse que o Diego apresentou.

[@sirlucasm]

mt bom conteúdo e dostei demais da ideia de video tipo daily vlog

[@fernandoaugusto8394]

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 !

[@dieegosf]

Obrigado Fernando, infelizmente uso pouquíssimo o Windows pra conseguir te indicar algo.

[@ctenonam4]

Eu adoraria que o Diego fizesse esse tipo de refatoração com meus códigos XD

[@JosueWalisson]

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!

[@dieegosf]

Obrigado Josué

[@ricardocoder]

• Muito interessante, e massa essa refatoração 🔥

[@ursochurrasqueira]

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

[@thiagonunesmiziara6866]

Meu sonho uma call com o Diego pra ele me guiar no que tenho que evoluir!

[@nathantorquato9777]

Baita approach, Diego! Top essa atitude de não criticar negativamente mas sim de forma construtiva e com consideração.

[@henriquemarques6196]

oq eh approach?

[@evandrogibicoski]

Show, Diego! Vc é demais cara :)

[@dieegosf]

Obrigaaaaado

[@matheussunderhus]

Aquela tosse pós Covid uahsuahsuhas. Ótimo conteúdo.

[@rafacapoci1757]

Esperava um video de clean code, recebi um de dicas para mac kkkkkkk.

[@Matheus-qv7yw]

muito bom!!

[@rafaelmindicelo1178]

E eu que nem de frontend sou, mas to aqui curtindo demais seu vídeo! hahaha fera demais

[@dieegosf]

Hahahahah que massa, Rafael!

[@ngungadev]

🙂🙂🙂 aprendi muita coisa neste vídeos!! parabéns

[@dieegosf]

Que bom!!

[@danilo_teixeira]

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.

[@maicongavazzoni2112]

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.

[@BrocchiRodrigo]

Sou fã desse cara, projeto massa eim mano!

[@dieegosf]

[@kimfrana6873]

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.

[@dieegosf]

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 :)

[@vitorgouveia5378]

Diego me leva e me ensina railroad error handling por favor😩😩😩 Brincadeiras a parte, vídeo muito bom

[@sucorrea]

Muito bom

[@sileo1149]

Faz música diegão ? Vi uma scarlett ali hein ! ótimo vídeo

[@kaiophillipe6004]

Esse state => state é importantíssimo. Para a performance e warnings no console.

[@dieegosf]

Demais, quero fazer um vídeo só falando sobre closures e como isso funciona no React :)

[@kaiophillipe6004]

@@dieegosf boaaa.. Voaa 🚀

[@mateuspamaral00]

tu é mt bom kkkkkkk

[@dev.daniels]

Faz um hook de event listener com typescript!

[@felipebutcher]

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

[@EmilioDvilela]

testa o lightshot... tem para windows e mac... muito bom.. e acho mais pratico que o cleanshot

[@wesleyluiz7705]

Muito bom, duvido refatorar um código meu kkkkkkk

[@itxToledo]

Me chama pra ensinar sobre smart contracts 😊

[@victorlongon]

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

[@dieegosf]

Boa, dá pra melhorar muito sim!

[@LuanHenrique-pc3nn]

O Diego é mt impressionante mds

[@dieegosf]

Osh, obrigado

[@BrunoBourne2012]

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

[@dieegosf]

Hahahahahahaha acontece, igual os vídeos da galera construindo casas no meio da floresta apenas com gravetos!

[@estudantedeti91]

No cron já tinha um spoiler do reality hasuhasuhs

[@thomasjardanedeoliveirabou9993]

Cara, com que você descobre esses apps?

[@LeandroSantiagoGomes]

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.

[@eduardorodriguesreichert8349]

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

[@arcd5875]

Achei que tava jogando watch dogs 14:40

[@danielfs]

Poderia compartilhar onde você geralmente descobre essas ferramentas para macOS?

[@mickael450450]

Isso é no dia a dia. Muito das coisas que ele usa ele da uma star no GitHub. So seguir ele la

[@davidrocky]

Mas vem cá Diego, esse setTimeout não vai acumular a cada update não???

[@danielvinicius4906]

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.

[@iujiujisato807]

o operador de % (remainder operator) é usado para retornar o resto de uma divisão, então por exemplo 10 % 3 retornaria 1

[@darlonhenrique7642]

Pq quando o Diego clara a const "countdown initial time in seconds" ele declara tudo em maiúscula e usando sneaker_case convention?

[@felipeaugustorodriguesnune5637]

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)

[@alexandrerocha7918]

Utilidade publica, somente começa a refatorar msm no 16:30

[@Pawl0solidus]

Se topar refatorar tenho um jogo feito em javascript e a lib Phaser.

[@luisfcodes]

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?

[@decovitorio]

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.

[@luisfcodes]

@@decovitorio perfeito sua explicação, muito obrigado 👊🏻

[@thejuliorodx]

Qual seria a melhor abordagem caso eu tivesse botões: Start, Stop e Reset?

[@dieegosf]

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.

[@professorcalvete]

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.

[@Dipblue]

Gatinho 🐱

[@rasdokuntsunori2253]

video ta muuuito bom. Só faltou vc beber uma aguinha pra n ficar esse barulho de boca colando que acaba dando uma agoniadinha

[@g.andrei04]

Ideia de refatoração do video, retirar essa parte de curiosidades do mac e ir direto pro clean code

[@rianmendes7349]

Quando vai volta os cursos de programação?

[@dieegosf]

Você diz os NLW, em breve volta aqui :)

[@henriquebarros8303]

Diego... paga para mim $$$$ HAHAHA

[@wollyverkk2263]

Daria para usar o RETURN do useEffect para verificar se o valor do secondsAmount é igual a 0. ou não?

[@GizBranco97]

tu pode usar uma expressão, secondsAmount == 0 && return...

[@sandisq]

Falaa Diego! Qual é a versão e o ano do seu MAC?

[@dieegosf]

Mac M1 Max 2021.

[@Gmaaa]

ixi, essas mesas não estão no padrão da NR17.

[@henrique_e_nas]

diego, e você? quando tu vais ter mentoria pra aprender a ser estiloso ? vai lá na zara rapá kkk brinks ta amigo

[@rogeriomq]

Essa ferramenta de captura me lembra do FlameShot, quando eu estava usando linux, para linux ainda não achei um melhor. xD

[@pedroalquimim]

Qual tema o diego está usando no vs code?

[@dieegosf]

Omni

[@pedroalquimim]

@@dieegosf Ty

[@josemargoncalves1532]

Quero aprender a programar

[@dieegosf]

Entra no Discover rocketseat.com.br/discover

[@andreaugusto3851]

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.

[@franciscomenezes6970]

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!

[@andreaugusto3851]

@@franciscomenezes6970 Sinto muito que sua graduação foi superada por um curso de 36 horas :(, mas se o curso ajudou então tudo bem.

[@lucasfelix7788]

@@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.

[@franciscomenezes6970]

@@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!

[@raulrothschild5876]

@@andreaugusto3851 huaehuehuahuehue sim, com certeza. Poem o curso de 36hrs no github e portifolio e espera sentadinho :)

[@gustavosantos5889]

Qual seria essa fonte do VSCODE, achei ela massa demais

[@wribeiro07]

Parece Jetbrains Mono

[@LeonardoOliveira-wd8gy]

Onmi Theme

[@gustavosantos5889]

@@LeonardoOliveira-wd8gy Valeu

[@lohanguedes9181]

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)

[@lucasarcanjo]

Por que ficar longe do ohmyzsh?

[@renanlima3464]

Vai rolar gravação com o Erick Wendell é? kkk

[@dieegosf]

Sei de nada

[@renanlima3464]

@@dieegosf kkkkkkkkkkkkkkk os caras que mais admiro dentro desse mundo de programação, juntos ... Orra, seria do cara#@&

[@vagnereix]

Como funciona pra conseguir trabalhar na sede do Google como o Diego sempre curte fazer? 😄 Não é qualquer dev que consegue, é?

[@FelipeRibeiroguitar]

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

[@vagnereix]

@@FelipeRibeiroguitar muito obrigado!

[@iujiujisato807]

@@FelipeRibeiroguitar O Cubo é um coworking, a empresa precisa passar uma entrevista e depois pagar mensalmente o número de cadeiras

[@necrotikS]

Qual fonte ele usa?

[@dieegosf]

Jetbrains Mono

[@necrotikS]

@@dieegosf obrigado! Acho meio estranho que no VS Code a fonte fica muito boa, mas nas IDEs da IntelliJ (PHPStorm), parece que não fica boa.