React - Tornando a Context API mais performática - Code/drops #77

[@WijLoc]

Aposto que quem fez a GoStack já estava com o useCallback na ponta da língua aí hehe Ótimo vídeo Diego!

[@sidneiglasman8878]

Mesmo eu que assisti ao episódio sobre React.memo associei.

[@rocketseat]

Que massa que curtiu, Willian! 💜 😍

[@italofsan]

Não precisei nem fazer a GoStack haha Justamente o que eu fazia, utilizava o useMemo e useCallback já que eles guardam referências de memória.

[@soufleetEnevinel]

Eu nem fiz o GoStack e já estava na ponta da língua, por ter assistido a live de Diego no Facebook DevC

[@yohanlopes1847]

Djabéisso Diego, se garante demais, o seu trabalho na rocketseat anda educando muita gente véi. Obrigado de verdade!

[@dieegosf]

Tamo junto!

[@Frankilintel]

Fala Diego! Sensacional!! Com certeza vai ser muito bom o próximo conteúdo de useCallback

[@rocketseat]

Faaaala, Frank! Que massa que curtiu! Pode deixar, anotei aqui a sua sugestão! 💜 😍

[@denislevy176]

Aula incrível como sempre! Adoraria ver mais sobre performance no react!

[@rocketseat]

Valeu demais pelo carinho, Denis! Opa, anotado! 😉 💜

[@andresdosantos5310]

Muito massa, peguei um projeto aqui com 385 ciclos de renderização, agora com a Context ele renderiza 82 vezes, agora vou usar isso aí e ver como fica.

[@peroconino]

Nooossa o Diego ta cada vez mais explicativo, adoro isso kkkkkk. Gosto muito de aprender o funcionamento das coisas por dentro e nos detalhes. @.@

[@surfistbrx1286]

Thank you for tNice tutorials! I've been trying to figure the software out on my own for a wNice tutorialle, and it's horribly confusing. TNice tutorials is the only guide video

[@douglasteixeiradeabreu]

Excelentemente explicado.

[@rocketseat]

Que show que curtiu, Douglas! 💜

[@victorbiasibetti]

Achei ótimo o video explicando esse hook de contexto e do useCallback confesso que fico receoso de usar libs "não oficiais" do react pois não sei até onde elas terão suporte e como isso vai afetar a refatoração no futuro mas o fato é inegável, essa lib ajudou muito!! gostaria muito de mais exemplos com useMemo e useCallback, uso pouco estes hooks e creio que podem ser beeem úteis

[@andre_zagatti]

Acredito que por a API ser bem parecida quando a gente isola a lib no nossos próprios hooks fica muito fácil de alterar quando tiver o release no próprio React.

[@rocketseat]

Faaaala, Victor! Sim, é um bom ponto pra se pensar! 🤔 Mas essa lib é muito prática, né!? Pode deixar, sugestão anotadíssima! 💜

[@rlmn9468]

Lança a braba no useCallback e useMemo Diegão!!!!!

[@davyxzs]

hanks lot Sir.. You helping us..

[@marcelohenrr]

Ótimo conteúdo, aguardando mais.

[@rocketseat]

Show, Marcelo! Deixa com a gente... 👀 💜

[@rubinskyzlatrovich6731]

Yes please! Performance video would be amazing!

[@rocketseat]

Hey, Rubinsky! Thanks for the suggestion! 😍 💜

[@laerthesouza8596]

Ótimo vídeo Diegão, queria muito um vídeo explicando sobre como melhorar perfomance utilizando useCallback, useMemo etc.

[@rocketseat]

Faaaala, Laerthe, beleza!? Que massa que curtiu! 💜 Pode deixar que anotei sua sugestão aqui! 😉 🚀

[@fischerrobson]

Conteudo massa demais, estou trabalhando em uma tarefa com context, e ele já estava ficando meio grandinho rs. Vou aproveitar esse ensinamento para refatora-lo

[@rocketseat]

Faaaala, Robson! Que massa! Depois conta pra gente como foi a experiência! 😍 💜

[@eduardoborges9798]

PUTZ QUE AULA QUE AULA!!!!

[@eduardoborges9798]

uma pena que não funcionou aqui, que ódio

[@isamye]

ótimo conteúdo

[@AdrianoMoreira1994]

Era o que eu precisava kkkkk Muito bom o vídeo, poderia realmente gravar um vídeo específico sobre o useCallback. Abraço.

[@rocketseat]

Que show, Adriano! Opa, sugestão anotada! 💜 😍

[@danilohenrique9135]

Com certeza seria muito bom um vídeo explicando o useCallback e o useMemo.

[@rocketseat]

Perfeito, Danilo! Anotado! 😉 💜

[@chmiiller]

fera demais! Manda mais video de performance, useMemo, useCallback e useRef que ta pouco

[@rocketseat]

Faaaala, Carlos! Que massa que curtiu! Opa, sugestão anotada! 😍 💜

[@guilhermerosa8494]

Ótimo vídeo! Estou esperando pelos outros de useCallback, useMemo etc hahahahaha

[@rocketseat]

Deixa com a gente... 👀 💜

[@misael7194]

nesse caso opto por usar o mobx, gosto dele pq caso precisa mudar algo de um objeto internamente só vai ser renderizado quem "observou" a mudança, ele tem um foco na performance, quanto mais componentes pequenos observando uma coisa só melhor a performance. Dá pra usar o Observer que ajuda em casos que é chato separar em um componente um trecho de código

[@tiagomaciel2488]

Muito bom acho que estou viciado em React e o conteúdo de vocês é simplesmente magnifico, meu objetivo é trabalhar na Rocketseat um dia

[@rocketseat]

Faaaala, Tiago! React é maravilhoso, né!? 💜 Poxa, valeu demais pelo carinho! 😉 🚀 Nós ficamos de olho nas pessoas que mais se destacam la na nossa comunidade do Discord... 👀 😛

[@felipembraga]

Com certeza eu quero o vídeo de useCallback!

[@rocketseat]

Anotado... 👀 💜

[@giulianabezerra]

Muito bom! Queria sugerir um conteúdo sobre react query ou swr do Next, não sei qual seria mais recomendado para usar como padrão de data fetching :)

[@rocketseat]

Faaaala, Giuliana! Opa, sugestão anotadíssima! 💜 🚀

[@annakarolinafranz5946]

Fiquei curiosa com essa distro que estas usando Diego??!!! referente ao video, é terceira vez que eu assisto e acho mto bom

[@marianefelix3009]

muito bommmm!!!

[@devtechenews]

Muito bom este CodeDrops!!! Crescendo tecnicamente com a Rocket! Um vídeo sobre use Callback seria top também 😁👏👏🚀

[@rocketseat]

Que show esse feedback, George! Booora pra cima com a gente! 🚀 😍

[@devtechenews]

@@rocketseat Só vamos pra cima 👏👏👏🚀🚀🔥🔥🔥😍

[@aleodoni]

Show de bola Diego. Já conhecia o usaCallback pelo GoStack, mas seria muito bom um vídeo atualizado sobre o mesmo. Abraço !

[@rocketseat]

Deixa com a gente, Alexandre! 💜 😍

[@jotamodesto]

É legal falar do useCallback e useMemo, uma vez que esses hooks geram um pouco de discussão, tem quem fale pra usar o useCallback em todos os callbacks e tem quem fale pra não abusar desses hooks.

[@ricardocosta8860]

Um video mais detalhado no uso do useCallback, memo e useMemo seria muito massa. No meu trabalho, utilizo código mostrado neste canal, e quero agradecer tudo o que fazes por nós. Saudações de Portugal!

[@pablodanilomota]

Seria baita demais um vídeo sobre useCallback e useMemo! haha Aguardandooo :p

[@rocketseat]

Sugestão anotada... 👀 💜

[@arthurandrade7148]

Show demais!! Gostaria muito de ver um vídeo mostrando a diferença entre useCallback e useMemo no React

[@rocketseat]

Sugestão anotada, Arthur! 💜 🚀

[@pedroabreu340]

Acho que um vídeo sobre useCallback seria mt top, saber o por que usar e como ajuda demais!!!

[@rocketseat]

Faaaala, Pedro! Opa, sugestão anotada! 😉 💜

[@walfredocarneiro]

Essa colcha de retalhos da programação web não termina nunca.

[@rocketseat]

Muita coisa nova a todo momento, né, Walfredo? 👀

[@walfredocarneiro]

@@rocketseat Muita coisa nova para todos os lados e muito difícil escolher um caminho entre tantas opções. A melhor opção hoje pode já não ser na semana que vem. Isso é bom por sabermos que toda inovação vem para melhorar a produtividade e o desempenho dos projetos, mas também gera insegurança para os projetos. React (Facebook) - Flutter (google) - .net (Microsoft) - Swift (Apple) Python .... -?

[@danielvinicius4906]

Conteúdo avançado de testes automatizados!!!

[@rocketseat]

Maravilha, Daniel! Sugestão anotada! 💜

[@FilipeMoraes87]

Excelente! Muito bem explicado. Obrigado pelo vídeo. Eu gostaria de ver conteúdo sobre useCallback e useMemo, apesar de já ter acesso ao conteúdo porque sou aluno do Ignite. Para quem não é aluno mas gostaria de ser, recomendo e muito o curso. A didática é excelente tal como os vídeos públicos.

[@rocketseat]

Faaaala, Felipe! Beleza!? Que massa seu feedback! Gratificante demais ler isso! 💜 😍 Pode deixar! Sugestão anotadíssima! 😉

[@juniorsk65]

Ótimo conteúdo, aguardando mais sobre performance no React, principalmente useCallback. Seria interessante também um comparativo com Mobx. Parabéns Diego

[@rocketseat]

Que massa que curtiu, Luciano! 💜 Pode deixar! Sugestão anotada! 😉

[@ovitoralmeida]

Muito bom o vídeo. Mas gostaria de ver o exemplo utilizando useReducer no provider passando o state e o dispatch no value!

[@marcusmaiialima]

Acho interessante esse assunto de performace no react, com uso ou mal uso é possível criar um monstro muito fácil hehe

[@rocketseat]

Demais, né, Marcus!? 👀

[@zxmarcos]

Eu desenvolvi um componente que renderiza um relatório complexo que é baseado na API do Context, e estava me perguntando justamente se havia alguma forma de impedir o componente de se re-renderizar (já que a construção do relatório é muito custosa), e me deparo com essa novidade que irá integrar o react no futuro.

[@brendowrodrigues2176]

Muito bom

[@rocketseat]

Valeeeeu, Brendow! 💜

[@andre_zagatti]

A Context API é incrível, dá uma versatilidade muito massa pro projeto. Escrevi um artigo sobre ela, quem se interessar só procurar por "AZagatti Utilizando a Context API eficientemente", valeu.

[@rocketseat]

É incrível, né, Zagatti!? Que massa! Parabéns! 💜 😍

[@duducv]

Me ajudou muito!! Em 2023, já temos algo nativo que venha substituir o use-context-selector ?

[@diegoarns4968]

Esperando o conteudo sobre useCallback e use Memo! Parabens pelo conteudo

[@jeffpal3840]

Top! faz um video sobre performance no react!

[@rocketseat]

Pode deixar, Jeff! Sugestão anotada aqui! 💜

[@AdeilsonTube]

Fala Diego, por favor faça sim vídeos de performance nos hooks useCallback e useMe no, isso já foi motivo de muita discussões na empresa.

[@rocketseat]

Faaaala, Adeilson! Beleza!? Opa, anotei sua sugestão aqui! Deixa com a gente! 💜 😍

[@duckbox]

show de conteúdo!

[@rocketseat]

Que massa que curtiu! 😍 💜

[@HenriqueMDerosa]

Diego, muito legal essa abordagem! Dúvida: A ideia de ter contextos menores parece ótima, mas se usarmos isso para gerenciar estado na aplicação inteira e precisarmos de dados de outro contexto, como poderiamos lidar com isso? Ao se falar de chamadas à API, pensei que daria pra usar React-Query, mas não sei se faz sentido juntar com Context. Minha intenção é manter toda a lógica de negócio fora da View. O que recomendarias pra fazer isso?

[@samueloliveira8970]

COOKING UP LIVE in soft soft!

[@rafaelvieira8957]

muito bom o video. Agora só esperando os videos de useMemo e useCallback ...

[@rocketseat]

Que massa que curtiu, Rafael! 💜 🚀

[@DiegoRodrigues06]

Isso me parece bastante com o que o Recoiljs está trabalhando pra resolver. Ou seja, separar cada conjunto de dados nos seus devidos átomos e renderizar apenas aqueles que consomem cada átomo. Será que essa api vai "matar" o Recoil? Eu gostaria sim de mais vídeos sobre performance e useCallBacks e useMemo

[@dieegosf]

Fala Diego, exatamente. Não acho que vai matar, só vai deixar o trabalho do Recoil mais simples :)

[@kairosilva9577]

Putz, excelente o vídeos. Faz majs um aulao ai com useMemo, UseCallback...etcetc.

[@dieegosf]

Tea with me, ou traduzindo, chá comigo!

[@leofrancis5684]

Gostaria que o tamanho da fonte do vscod tivesse um tanho aceitavel, pois quase nao é possivel ver o codigo feito

[@pradella]

Em 2024 isso ainda é válido? Ou o React 18 já está fazendo por si próprio? PS: Ótimo video como sempre ;)

[@judantas4129]

Hoje em dia ja saiu o context selector nativo?

[@victorraton7322]

E se eu usar useCallback nas funções ocorre a igualdade referencial pois a callback será criada com a mudança do provider...?

[@rafaelfez]

Video sobre performance siiiim pf

[@rocketseat]

Opa, deixa com a gente! 😉 💜

[@sampaioleal2140]

Orando para sair um vídeo sobre MobX no React

[@rocketseat]

Faaaala, Sampaio! Sugestão anotada! 😍 💜

[@petregluiz]

Ótimo video Diego, essa lib, funcionam no RN?

[@dieegosf]

Opa, acredito que sim, mas não cheguei a testar. Vale o teste e falar aqui nos comentários :)

[@AntonioFernandes-nq5tr]

A api Context Selectors também pode ser utilizada no React-native?

[@carlosoliveira-burndev776]

Alguém sabe como podemos testar um componente que usa os hooks conforme está nesta aula ?

[@EricFrankLi]

Eu to fazendo um projeto onde eu tenho uma tela que recebo uma listagem de uma API, e estou usando o Context para receber estes dados, guardar e também manipular estes dados, adicionando e removendo itens nesta lista usando hooks. Desta maneira é a mais correta ou seria melhor eu fazer este gerenciamento na própria tela onde eu só recebo os dados do Context?

[@LSbrissa]

#PR - De fato o useCallback/useMemo são ótimas maneiras de resolver problemas de renderização alem de melhorar a performance. Mas a mágica desse hooks não são gratuitas. Existe uma forma de medir o impacto e uso de recursos de processamento da nossa aplicação quado utilizamos muitas técnicas de "memorização"?

[@rocketseat]

Faaaala, Leandro! Opa, valeu demais por deixar sua dúvida pra gente! 😍 💜

[@LSbrissa]

Se o app.for complexo, vai ficar bem verboso, muitos arquivos, porém com melhoria de performance incomparável. Muito bom. (Ansioso pela atualização do REACT)

[@rocketseat]

Exatamente, Leandro! Bom ponto! 😉 💜

[@DihCpsPsy]

como vc faz para aparecer esse auto import no vscode?

[@tiagobarros7093]

traz mais videos sobre performance no react!!!

[@rocketseat]

Sugestão anotada... 👀 💜

[@Eduardo-cx1up]

Vocês vão abrir turma nova do Ignite entre Agosto e Outubro ou só essa que está por vir agora? Queria muito fazer, mas ainda estou aprendendo Javascript Intermediário, falta JS Avançado, Html avançado e Css avançado pra mim terminar de estudar essa parte. E provavelmente não devo conseguir terminar de estudar isso tudo até as próximas inscrições do Ignite, até devido ao final de semestre da faculdade, com muitas provas… O que recomendam? Podem falar se vai ter mais turmas no próximo semestre?

[@dieegosf]

Fala Eduardo, provavelmente teremos sim, mas ainda não sei te dizer as datas.

[@Eduardo-cx1up]

@@dieegosf será que vale a pena eu comprar o ignite nesse que está por vir agora, e começar mais pra frente sem acompanhar voces? e depois quando lançarem o proximo eu refaço junto mais rápido para acompanhar... Voce acha que eu ficaria perdido 'sozinho'? kkkk

[@douglasoliveira2119]

Falaaa Diego, tenho reparado nos últimos vídeos que você tem utilizado `type` onde era normalmente utilizado `interface` para criar tipagens. Algum motivo específico? Abrasss!

[@dieegosf]

Tem dias que eu acordo querendo usar interface, outros acordo querendo usa type, nada especial.

[@douglasoliveira2119]

Obrigado por matar a curiosidade, huahuahuahua

[@ViniciusSantos-xd6kp]

Ótima explicação Diego, obrigado pelo conteúdo. Uma dúvida, existe alguma forma de visualizar a renderização dos componentes no React Native, igual vc faz utilizando o devtools do navegador?

[@dieegosf]

O DevTools pode ser usado no React Native. Você pode inclusive usar o Flipper (kzbin.info/www/bejne/eZ-WnXichKZ2fLs) que tem uma integração nativa no React Native (não funciona em apps com Expo no Managed Workflow).

[@FabianoRamosInfo]

Tem uma aula do GoStack que o Diego fala: "Funções dentro de uma outra função pai: useCallback, a partir de agora isso é uma regra no GoStack...rsrsrs", nunca mais tive problemas.

[@rocketseat]

Essa regra é ótima, né, Fabiano!? 🤣 💜

[@FabianoRamosInfo]

@@rocketseat Putz, nem me fala. Nunca mais esqueço disso 😉

[@rocketseat]

Que show! 💜

[@FabianoRamosInfo]

@@rocketseat a melhor!

[@rogeriomq]

Até o minuto 8, minha mente já aqui: só usar o recoiljs no lugar de contextAPI. Rsrsrsr

[@el_tony_montana]

Continuo com esse pensamento huahua

[@matheuslc5]

Vc utilizou alguma extensão pra mostrar o erro com o código na tela? 12:38

[@rocketseat]

Faaaala, Matheus! Beleza!? Isso é do próprio Next! 😉 💜

[@kant859600]

E o Svelte?

Rocketseat está matando a pau, pena que comprei o bootcamp e estou com pouco tempo para estudar...

[@danilocanalle]

Diego, tem alguma dica de como debugar a renderização dos componentes no React Native? Já sofri bastante por lá tendo que colocar váriosss logs! Obrigadoo 🚀

[@dieegosf]

Você consegue usar o React DevTools no React Native, inclusive se usar o Flipper já vem integrado isso :)

[@danilocanalle]

@@dieegosf Caracas! Muito bommmmm!

[@thiagodomingues7396]

Eu utilizo o React Dev Tools, Redux Dev Tools e tem uma forma de debuggar passo a passo pelo VSCode tbm

[@danilocanalle]

@@thiagodomingues7396 top thiago, a questão que pegou foi visualizar os componentes se renderizando mesmo :) vlw

[@FlavioAMaduro]

Gostaria muito do useCallback e useMemo detalhado por favor!

[@dieegosf]

É pra já!

[@matheusdemirandaferreira1455]

Faz um usando os uses do react dkdkdkkd

[@rocketseat]

Faaaala, Matheus! Opa, sugestão anotada... 👀 💜

[@matheusgrundler1681]

Qual sistema operacional tu tá usando Diego?

[@rocketseat]

É o Kubuntu, Matheus! 😍 Vou deixar um vídeo do nosso querido Rodz estilizando: *Customizando KDE Plasma (Kubuntu, Manjaro, etc) | Guilherme Rodz* kzbin.info/www/bejne/nl6ppHpjhtWanKs 💜

[@ClaudioCavalcanteTonha]

Só usar callback sem o context selector n funcionaria?

[@rafaelmrantunes]

Não, porque o componente que utiliza o useContext atual escuta todo o contexto ao invés de um único pedaço de informação.

[@tennebris5371]

Fala Diego. Vc acha q todas as funções deveriam ser criadas usando usecallback. Se não pq não é recomendável usar?

[@dieegosf]

Não, diferente do useMemo, o useCallback é usado somente para o problema de igualdade referencial que eu cito no vídeo, vamos usa-lo principalmente quando estamos passando uma função de um componente pai para um filho e não queremos que o componente filho renderize quando o pai atualizar.

[@tennebris5371]

@@dieegosf obrigado. Espero vários conteúdos esse ano. Sucesso

[@leandrodasilvasaraiva371]

ja está nativo no react os seletores?

[@DanielRibeiro516]

Qual é o tema do kde que o Diego usa?

[@dieegosf]

Dracula.

[@DanielRibeiro516]

@@dieegosf valeu!

[@leonardorostirolla9618]

Não consigo entrar no servidor do Discord, poderiam reenviar o convite por favor?

[@rocketseat]

Faaaala, Leonardo! Beleza!? Você já tem cadastro na nossa plataforma!? 😊 Na aba do *Discover* tem um botão escrito *Comunidade* que te redireciona pro nosso servidor! Dá uma olhadinha se por lá você consegue! 💜

[@angelovso7469]

Manda Bala no usecallback

[@jean3x7]

Pq saiu do mac e foi pro linux? estou querendo ir tbm...

[@paulothiago5782]

Pesquisa por "Rocketseat Linux", uma parição atrás, Diego e Mayk.

[@rocketseat]

Falaaa, Jean! Dá uma olhadinha nesse vídeo: *Por que migramos para o Linux? Como testar apps iOS no Windows, GarageBand com RN? | **#PR** 15* kzbin.info/www/bejne/fnyoZaihr7StY7c 💜 🚀

[@luizeduardofranco9380]

Faz sobre useCallback e useMemo PFVVVVVV!!!!!!!!!!!!!!!

[@rocketseat]

Faaaala, Luiz! Opa! Anotado aqui! 💜 😉

[@luizeduardofranco9380]

@@rocketseat obg!! Vcs são dms

[@luizeduardofranco9380]

@@rocketseat esse vídeo salvou a minha vida, tive esse problema só q em uma escala bem maior, tentei usar o Context do próprio react e n deu certo, tava ficando doido já, tinha tentado de quase tudo e msm assim tava renderizando tudo, vlw dms, vou implementar isso já

[@maximosdrr]

Faz do usecallback pf

[@rocketseat]

Deixa com a gente! 💜

[@osmargomes8940]

como implementar typescript react-router-dom

[@rocketseat]

Faaaaala, Osmar! Sugestão anotada! 💜 🚀

[@GilCarvalhoDev]

"Context Selectors deve vir logo". 2 anos depois............... 😓

[@rocketseat]

😅

[@keiyzaStudio]

kkkkkkkkkkkkk né isso

[@TiagoDark]

Zeeuus me free, react-sweet-state ta ai, FICA A DICA. Vcs tão transformando contextApi num redux built-in piorado com os mesmos problemas de verbosidade e wrappers. Pq da toda essa volta pra ainda ficar dependendo de consumer wrapper e não ter redux devtools.

[@gabrielsouza9573]

lazy loading

[@rocketseat]

Ótima sugestão, Gabriel! 😍 💜

[@henriques3469]

ContextApi é meme, se empolgaram em saír do redux e continuam criando wrapper hell em pleno 2021

[@jtciuri07]

fala um pouco sobre as outras alternativas para o redux alem da context ou mobx, como o zustand

[@rocketseat]

Faaaala, Iuri! Perfeito! Sugestão anotada! 💜 😍

[@diegofranca92]

Show de bola Diego. Mas vale a pena usar essa forma por agora ? Já q o core do React ainda esta em experimento ? useCallback e useMemo são muito bons mesmo. Manda mais conteudo sobre eles 😁

[@marciozotelli]

TOP. E com certeza é um assunto a ser aprofundado no canal.

[@sidneiglasman8878]

Como sempre, ótimo conteúdo. Assim que você apresentou o problema, eu me lembrei da tua aula de React.memo; é que logo depois dela eu me interessei pela memoização e que, então, eu fui atrás de useMemo. Eu teria tentado resolver o problema com useMemo. Aí tu falas sobre useMemo e useCallback. Sim ver este conteúdo mostrado por ti vai ser legal! Queremos sim.

[@rocketseat]

Que massa, Sidnei! E curtiu trabalhar com useMemo!? 💜 Pode deixa que anotei sua sugestão aqui! 😉 🚀

[@sidneiglasman8878]

@@rocketseat sim gostei bastante, mas usei pra estudar, um exemplo do medium.com