O ERRO mais comum no React (você já fez isso)

Um dos erros mais comuns no React (e você provavelmente já cometeu também) é a criação de estados derivados, que são estados criados a partir de outra informação já presente no componente.
Esses estados acabam causando renderizações desnecessárias, que podem ser substituídos facilmente por variáveis calculadas em tempo de execução.
Nesse vídeo eu coloco a mão na massa pra te mostrar como identificar os problemas e corrigi-los.
Bora codar?
-----
Conecte-se a 200mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com...
Cadastre-se na nossa plataforma: app.rocketseat...
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat_oficial

[@JavaxTv]

Diego do céu, eu passei EXATAMENTE por isso hoje, e tomei a direção de ir pra uma variável normal, fui questionado e eu mesmo fiquei me questionado se era assim mesmo que deveria resolver. Esse vídeo caiu como uma luva... cara que coincidência maluca haha obrigado por esclarecer, já posso deitar mais tranquilo no travesseiro e mostrar isso pro pessoal que questionou tb :D

[@dieegosf]

Bahh, que massa saber que o vídeo te ajudou, fico feliz demais! Bora pra cima 🚀

[@Cookieukw]

eu n precisei disso mas tbm notei q dava pra ussr variáveis comuns sem ser estados. inclusive dá pra usar classes tbm

[@WandersonSilva-bx4yu]

cara, por conta do áudio pensei que meu PC tinha lagado nos 11:36 kkkkkk conteúdo top Diegão, tamo junto.

[@thonyyxz]

that’s a very good tutorial!

[@gabrielpaulino9437]

Valeu :D

[@guilhermegirardi]

Excelente! Orange Juice Theme

[@marcelolupatini5553]

Eu tava com sdd de um vídeo mais assim aqui no canal da Rocket. Curto, pra passar conteúdo indo direto ao ponto e sem ser pra dizer "Se quiser se aprofundar, faça nosso programa pago". Eu já estava ficando saturado de marketing (e olha que sou aluno). Então, é bom ver um vídeo da Rocket assim xD

[@myguelangello8563]

Com certeza, gostei demais desse conteúdo com esse formato, é sempre bom variar

[@rdgomt]

Concordo

[@betasetupper6103]

Agora ja sei porque do double rendering (!== React 18)... Tem vezes que so de abrir a pagina, ele da double rendering (fora do React 18).. Apos esta aula, vou prestar mais atenção... Bem sobre o theme do VS Code.... Eu uso o theme do Github Copilot, Mas gostei do theme que usou no video. Muito Bom... Abraços de Moçambique, Beira

[@assuntograve4222]

Kmk Compatriota kkk

[@yarapolana]

Terra da minha mãe, que bom ver mais Moçambicanos deste lado.

[@jvmachado1204]

O pior do derived state é quando ele dá sinais falsos na UI. Um exemplo seria se essa lista de repositórios aí tivesse um coraçãozinho do lado pro usuário dar like. O like dado na listra filtrada não apareceria quando o usuário apagasse o filtro (e vice-versa), já que seriam essencialmente duas listas diferentes que só parecem ser iguais. Isso dá maior xabu.

[@juserrrrr]

Oq seria melhor então?

[@dieegosf]

Boa, faz total sentido!

[@DanielRios549]

Pode parecer estranho usar variáveis simples no React, mas na boa, pra mim elas são a primeira opção, sempre, sem mais nem menos, usar estado é apenas necessário quando essa variável simples não está atualizando, ai sim o uso do estado é útil, no fundo continua sendo Javascript, quanto mais coisas nativas do Javascript vc usar, melhor

[@xikaojr]

Quem nunca caiu tá mentindo! kkkkkkkkkkkkk IRADÍSSIMO! !!!!!

[@alamo_DevFlow]

Ah, kkkk amanhã mesmo já vou arrumar o filtro que eu fiz na empresa kkkkkkkkkkkk. Obg pelo vídeo.

[@ChristianFerraz]

O ignite 2022 está bem melhor que o anterior. Estou aprendendo muito, parabéns!!!

[@franciscomenezes6970]

Ta menos complexa as explicaçoes aprendendo entendendo muito mais.. quase terminando o modulo2

[@user-zv6vl6ne9z]

Vou comprar assim que possivel. Tenho entrevista amanha, se tudo der certo kkkk eu compro ainda esse ano.

[@nikegamer2779]

@@user-zv6vl6ne9z boa sorte man 🙌

fiz o ignite 2020 e gostei bastante

[@user-zv6vl6ne9z]

@@nikegamer2779 vlw mano.

[@TheSostenesg7]

A dica é top, mas seria o ideal usar o useMemo, com o search como dependência, para armazenar a lista filtrada. Sei que nesse exemplo o componente é só a lista com o filtro em si, mas se fosse um componente com mais algum outro state, se esse outro state mudasse, o filter seria recalculado à cada renderização, sem necessidade.

[@dieegosf]

Claro, tem muita coisa que pode ser melhor no código, o ponto era focar no estado derivado mesmo 😊 Obrigado pelo comentário!

[@drgabbo1025]

Acredito que não tenha necessidade, o React é bem otimizado a ponto desse tipo de operação simples não prejudicar o desempenho, apenas se fosse um calculo muito pesado, até pq memoizar um valor ira ocupar endereços de memória o que pode se tornar um problema também

[@samuelpauloantonio2211]

Caraca 🤯! mano... Diego você é top muito obrigado, conselho mano tenta descansar um pouco eu senti que nesse video você emagreceu um pouco, não sei como esta espero que esteja tudo bem com você.. tamo junto !!!

[@develolder]

Top.. vlw, eu já cai nessa algumas vezes… Bora refatorar rsrsrs. Obrigado Diego

[@GustavoHenrique-pk8ed]

Aula incrivel! Só acho que poderia ter deixado a música de fundo mais baixa.

[@dieegosf]

Valeu pelo feedback!

[@estrng_]

Foi só comigo que essas músicas lofi incomodou? Para estudar, programar e fazer coisas envolvem só nossa mente elas são ótimas mas agora no vídeo do Diego me deu desconforto...

[@henriwasd]

Caramba, eu fazia isso, e uma vez um Dev com cargo superior me corrigiu falando que eu tinha que criar os state...

[@joseetchichury2489]

eu estou tendo o problema que está renderizando 7x a mesam paginda e agora estou me perguntando como eu paro isso, para renderizar só uma vez. Meu useEffect está renderizando 2x a mesma coisa e criando uma arr gicante. Tu acabou de me dar uma luz de onde eu procuro o erro para corrigir o meu bug

[@lucasmoreno8232]

Eu utilizaria assim para evitar utilizar condicional dentro do jsx pra saber qual lista ser renderizada, mas curti muito seu jeito tbm, abraço! const filters = React.useMemo(() => { if (!search) return repos; return repos.filter((repo) => repo.name.includes(search)); }, [search]);

[@dieegosf]

Tem várias coisas que podemos melhorar no código com certeza, mas o foco era somente a parte de estados derivados, muito obrigado pelo comentário 💜

[@cassianojr2013]

Cara, eu estava trabalhando em um projeto da faculdade em React usando firebase, e por causa DESSE EXATO PROBLEMA eu estourei o limite de requests do firebase umas 3 vezes... Ah se eu soubesse disso antes kkkkkk (ps sou novo em react :P )

[@viniman84]

Fiz dessas também com uma API do Google kkkkkkkkkkkkkk

[@npxdev]

É assim mesmo mano, desenvolvedores bons sempre encontra alguma coisa nova nas estrelinhas com o tempo, o esquema é não parar. Estou começando no React tbm, ainda bem que vi esse vídeo antes de ter passado por esse problema

[@hallancosta1302]

Onde você faz faculdade, que ensina React, para eu recomendar para galera? eu tive que aprender sozinho e com a Rocketseat, porque na minha ensina só PHP

[@cassianojr2013]

@@hallancosta1302 minha faculdade n ensina react n kkkkkk era disciplina de projeto q o professor n especificou a linguagem

[@agenciavolksein5486]

idem 60k requests em uns três a quatro minutos ... hahaha

[@adrielschmitz]

Outro ponto que gostaria de contribuir é sobre setar o state no instante em que o usuário digita... você não precisa fazer isso, pode-se usar, por exemplo, uma estratégia de debounce (se não sabe o que é, é uma boa hora pra pesquisar) e só buscar quando o usuário tiver certeza do que ele quer. Nesse caso aí é uma dumpList, o JS faz esse filter em um piscar de olhos, mas pensa que você precisa fazer essa busca no banco e cada letra digitada seria uma requisição.

[@dieegosf]

Sim, existem mil coisas que poderiam ser diferentes, mas o ponto do vídeo é exclusivamente falar sobre estados derivados

[@henriquemagno9326]

@@dieegosf Verdade, ainda bem que ele avisou no inicio do comentário que era OUTRO ponto

[@vitorhugo4528]

normalmente eu faço requisições direto para api, onde cada letra é uma requisição, de fato isso me deixou bem pensativo sobre como pode ser um mal uso.

[@andresdosantos5310]

Eu já cai nesse problema e cometi esse erro, vaaleu Diego, esse erro eu não faço mais...

[@LivesDoVini]

muito necessário.

[@douglasfeliphe2104]

Cara passei por isso ontem e perguntei para um amigo, ele falou: "taca tudo num state" kkkk

[@gsgaldino8314]

Tema do vscode é Dark Material Dracula o resto é história

[@fernandolaice8256]

Poxa valeu...eu já cometi muito esse erro. Valeu Diego

[@braddoidao8818]

Que saudade de vídeos mais curtos com um conteúdo top. Valeu Diegão, e aparece mais vezes com videos feras assim!

[@leonardopn]

Muito bom, sempre cometi esse erro kk. Uma duvida, embutir essa variável em um useMemo, seria mais performático ou no geral isso não faria diferença?

[@gabrielbrunichaki9990]

Fiquei com essa dúvida também... sempre faço com useMemo

[@BrocchiRodrigo]

No caso do useMemo para uma lista fixa, não afetaria o render apenas se não for incluído nada novo na tela, para remover itens por filtragem ele não volta a renderizar algo existente. O problema é em caso de api paginada. Ai a estratégia fica um pouco mais complicada. Se você tem uma lista de 10000 mil itens filtrando 100 por página por exemplo, ai a coisa muda um pouco de figura. Ai eu fiquei com uma dúvida de melhor estratégia nesse caso.

[@adrianowyy]

@@BrocchiRodrigo cara, nesse caso eu acho melhor trazer de 100 em 100 fazendo requisições para a API. Uma requisição para casa página quando o usuário solicitar

[@luizfelipeop]

Mt bom haha, ja fiz mt isso, inclusive acho q fiz isso hoje haha

[@joaolucasht-if1bs]

Drácula 🧛

[@JeanSilvany_]

Caramba Diegão que Cam é essa hein? Deus benza 🙏🙏

[@hubertryan]

Eu: indo corrigir o meu código que acabei de fazer isso...

[@joaojeeferdasilvafelix3817]

Já caí nessa. kkk. Muito boa essa abordagem

[@robotinike]

Se eu cai nessa? kkkk...ai ai, Tenha certeza que Sim!..rsrs

[@buiuzin2997]

se colocasse esse .filter( repo => repo.name.includes(search) ) depois do map do return , não funcionaria ?

[@DVSK1]

baita vídeo, parabéns pelo conteúdo

[@matheusbueno1305]

Sempre achei q o errado era não usar useState pra guardar esse tipo de dado 🤯🤯

[@gleydsonbrito1717]

Já fiz muito isso. rsrsrsr é vivendo e aprendendo

[@lucasdepaula9744]

aprendi isso recentemente na marra. Uma das coisas q podia ter feito para melhorar ainda é em vez de ter 2 states com o arr dos repos voce poderia ter apenas 1: const reposToShow = search.length > 0 ? repos.filter(...) : repos; sendo assim vc evita aquele ternário dentro do JSX

[@me.dwesley]

Boa solução!

[@shadowsplay1852]

Isso não fere a regra de manipulação de state que o próprio React determina, onde não é recomendado manipulação no mesmo state. sendo que se houver alguma modificação no estado ao qual vc precisa manipular, seria de bom uso, você criar um "clone" para armazenar as manipulações? Me explique se eu estiver errado por gentileza.

[@diegoloop]

Estava pensando como fazer um search eficiente e fiquei curioso com esse título e acabei de ganhar uma expertise de como evitar um estado derivado e search eficiente😃😃

[@Alan4F50]

Ótimo conteúdo, cara!! valeuu

[@edsonhenrique3579]

Faz total sentido pq os functions components recalcula todas as variáveis dentro da função a cada renderização. 🤡 e acabei de perceber que eu cometi esse erro hkkkkkk 🙃

[@higor_cos]

Isso aconteceu comigo essa semana, tô sem acreditar. Parece que o vídeo é pra mim kkkkkk

[@denisonferreira4720]

Partiu refatorar meus códs huehuheuheu

[@willraoli]

Faz um vídeo usando o tema Plastic!

[@jennifermagpantay7933]

Clap clap clap. Conteúdo sensacional!

[@Os3t4God]

Cai nessa semana passada com RN kkkkkk Valeu pela dica Diego!! Vou refatorar meu codigo.

[@ricardogava3494]

Daria pra usar um useRef pra armazenar a lista filtrada? Sobre o tema eu tô usando o Aura Theme na versão soft dark, acho bonito pra carai, tem o Omni, Tinacius Design versão legacy e Winter is Coming versão dark blue com italic

[@dieegosf]

Até dá, mas não é aconselhável, além de não ser nada semântico, a criação da variável ali é extremamente rápida, no máximo poderíamos usar um useMemo caso seja necessário no futuro.

[@jkfher]

Geralmente eu faço isso ai, so que crio com useMemo

[@zerohum6447]

Very helpful..thanks a lot.

[@samueloliveira4465]

Recomendação de vídeo: Poderia fazer um vídeo sobre responsividade no tailwindcss

[@eddi3ms]

faço direto 😅fazia direto! Conteudo top demais

[@acm.marques]

Top D+ Diego e já devo ter caio nessas pegadinhas hehehe, mas com react native

[@danilocanalle]

O único problema do video é que terei que refatorar todo meu Aplicativo. 😃😅🥲

[@Douglasbg1]

Meu "padrinho" me falou exatamente isso ontem, me explicou e tal e hj caio nesse vídeo. KZbin ta me espionando em.

[@Vrankistoviskc]

Still working as of today, ty!

[@Vrankistoviskc]

WTF Man roubaram minha conta e tão fazendo comentários em inglês

[@juniorstreichan]

Trabalho com React tem 4 anos e cometo esse erro

[@PLifes]

Boa cai recentemente! Mas a partir de agora consigo ter uma solução melhor! Valeu Diegão!

[@giovana.n2465]

É algo besta, mas que fiz muito no código, muito bom o conteúdo, simples mas muito bom

[@johnrodrigues559]

Bom demais , que conteúdo irado

[@gedeonramiro3174]

Eu sempre comento esse erro mas agora sei como resolver kkkkk

[@antoniositoe5814]

Diego sempre a trazer solucoes

[@natahermes8047]

Isso funciona bem para este caso do vídeo, pois, só o filtro da lista que dispara a renderização. Mas, pensando em casos diferentes: se tivesse alguma outra ação nessa tela que disparasse o render, a lista seria recalculada também, correto? Pra solucionar isso eu adicionaria uma memorização na hora de calcular a lista filtrada. Essa seria uma boa solução?

[@dieegosf]

Claro, tem muita coisa que pode ser melhor no código, o ponto era focar no estado derivado mesmo 😊 Obrigado pelo comentário!

[@CarlosEduardo-sy6mr]

Você pode ainda memoizar o resultado da função através do useMemo, pra não recalcular quando houver uma renderizacao que não envolva a variável.

[@dieegosf]

Claro, tem muita coisa que pode ser melhor no código, o ponto era focar no estado derivado mesmo 😊 Obrigado pelo comentário!

[@fabiobalan3583]

Esse Diego é MONSTRO!

[@juniorstreichan]

Eu uso tema cyberpunk

[@fabiobaziota5919]

Nossa, eu fazia exatamente assim.

[@Matheussilva-xk1ez]

Trás mais vídeos assim poxa

[@rafacapoci1757]

Ótima dica que serve para muitas situações

[@AldemirSouzai9]

Cara muito bom! Dicas incriveis \0/

[@BrunolimaMe]

Excelente aula!!! E poderia reduzir mais o código, colocando para filteredRepos receber repos, caso condicional fosse false. Assim, removeria a outra condicional da listagem, fazendo o map apenas em filteredRepos.

[@luispaulopastor1451]

Muito legal esse tipo de video!

[@Farinha12ful]

Fazia certo e nem sabia kkkkk

[@luizpaulo2240]

Thanks so much bro.

[@gustavocamargos8137]

Mas se você tem mais estados dentro desse componente e uma filtragem mais complexa (com strings maiores por exemplo), você pode estar tendo que rodar a mesma filtragem repetidas vezes, sem que o valor do filtro tenha sido alterado. Talvez você possa ter menos renders, mas a cada render você pode estar tendo processamentos redundantes. Tem que ver até que ponto isso vale ou não a pena, acho que varia de acordo com o caso de uso. Fora isso, o ideal seria executar a filtragem somente quando usuario terminar de digitar, colando um timeout no useEffect, não tem porque ficar filtrando a lista a cada caractere que o usuario digita, acredito que sem um estado adicional, seja mais complexo fazer isso, se é que é possivel

[@igor482]

Já passei por isso kkk, boa dica

[@saviodev777]

vou usar no meu dia a dia, valeu

[@misaruto]

Que video delicinha kkkk Tema VScode: Atualmente to usando o Omni da Rocketseat, depois de ficar muito tempo usando o Dracula Text Only.

[@eltonsantosoficial]

Eu aprendi a fazer daquele jeito com vc msm kkkkkk Programacao eh muito dinamica ne, a msm pessoa q ensina de uma forma, tempo dps ensina de outra forma melhor. Muito massa! Parabens pelo conteudo. Gosto muito desse tipo de video. Abraco

[@m4rcaoferole]

Show!! Renderizar o que foi renderizado... poxa vida como algumas coisas passam despercebidos. #eujafizisso.

[@cassianofranco3082]

Experimenta o tema "Black" e modifica os comentarios pra vermelho "editor.tokenColorCustomizations": { "comments": "#FF0000" },

[@tiagoryan6599]

Eu confesso que faço isso.

[@leandrojackson9631]

Maaaano do céu kkkkkk, eu sempre cometi esse erro, que massa!!! Quando vi o thumbnail do video, já imaginei, tou errando, certeza kkkkk. Valeu diego!!

[@aloissailer]

Ótimo video, parabéns! No momento estou usando Tokyo Night no VS Code.

[@daishes]

Eu acho que nesse caso ao invés de uma variavel o uso de useMemo seria melhor, já que filtrar uma array é o(n)

[@CarlosEduardo-sy6mr]

perfeito

[@MateeusSouza]

Dica muito TOP e útil 👏👏

[@nazirmudumane8830]

Meu Deus, eu sempre cai nessa. Muito obrigado Diegooooo❤

[@leandroramos1990]

Diegão quem nunca passou por isso que atire a primeira pedra haha, conteúdo simples e objetivo parabéns.

[@viniciusnascimento6503]

Muito massa... vou usar esse tips showw 👏👏

[@carlosfsilvac]

Já fiz isso várias vezes, ótimo conteúdo

[@ixiba]

Parece que foi direcionado para mim esse vídeo kkkk. Perfeito Diego, obrigado!!!

[@ThugLifeModafocah]

Hummm, eu tava errando nisso. Valeu. As vezes na ansia de entregar no prazo, não conseguimos de fato analisar o que está sendo feito.

[@igorbueno4815]

Nesse caso de chamadas REST que derivam resultados filtrados, outra boa solução seria o hook useMemo() para retornar uma lista de repositórios a qual só será atualizada se o filtro mudar de valor. O hook acaba fazendo valer a pena se as chamadas retornarem muitos registros.

[@jeanvitor963]

Este é um excelente caso de uso do useMemo.

[@ezequielcardoso2431]

Que conteúdo top, parabéns!!!

[@paulohenriquedacostabarros8987]

Cometi esse erro no projeto que atuei. Vlw pela dica

[@albuquerquedev5200]

Acontece demaaaais

[@mbs2488]

Excelente ! Muito Bem Explicado ! ! Parabéns pelos vídeos ! ! !

[@rodrig0krvalho]

E tem esse erro mesmo kkk

[@TheBrunoleocoelho]

Parabéns pelo vídeo, simples e objetivo, mas "matou na mosca"! E é por essas e outras que tem tanto app ruim rodando por aí, e frustrando usuários (e outros devs que fazem manutenção no código)! Uma grande quantidade de devs "Reacters" não entende disso aí...