Utilizando as refs no React de forma avançada | Code/Drops #52

As refs no React são utilizadas para acessarmos elementos nativos de forma imperativa, podendo acessar diretamente suas propriedades ou invocando funções presentes nesses elementos nativamente.
Mas dentro do React a utilização das refs não para por aí, podemos utiliza-las para muito mais do que isso, como armazenamento de valores sem novas renderizações do componente, repasse de funcionalidades de componentes filhos pro componente pai e muito mais.
Nesse vídeo vamos mostrar todos segredos escondidos por trás das refs no React.
-----
Conecte-se a 200mil devs e avance para o próximo nível com a nossa plataforma:
www.rocketseat...
Acompanhe a Rocketseat nas redes sociais:
Twitter: / rocketseat
Facebook: / rocketseat
Instagram: / rocketseat_oficial
Comunidade: comunidade.rock...
Blog: rocketseat.com...
Inscreva-se na nossa Newsletter!
rocketseat.ck....
Ouça também:
Spotify: spoti.fi/2PwXeUp
Anchor.fm: anchor.fm/faladev
Apple Podcasts: apple.co/2pReOrN
Google Podcast: bit.ly/2Cgj077

[@guilhermeaugusto1404]

Era disso que eu precisava kkk, tava quebrando a cabeça com ref ontem, continuem trazendo conteúdos avançados

[@rocketseat]

Boaa Guilherme!! Valeeu pelo feedback!! 💜💜

[@marcella3030]

Nossa, meu comentário não tem nada a ver com o conteúdo, mas só precisava dizer o quanto eu AMO essa músiquinha da abertura!!

[@rocketseat]

Boa! HAHAHAHA É muito gostosinha de ouvir, né, Marcella? 💜 😍

[@__Cesar__]

Muito bom, só precisei fazer uma alteração. No lugar de RefForwardingComponent usei ForwardRefRenderFunction porque o vscode reclama que o primeiro foi marcado como preterido

[@splhead]

"Ah agora eu entendi, agora todas as peças se encaixaram"

[@rocketseat]

Hahahaha 😊💜

[@hendrickmanenga9213]

Trabalho nobre de instruir o mundo.Está de parabéns Diego.

[@gabryelfhsoares]

Valeu mesmo Diego, é muito difícil encontrar conteúdo avançado e acho que isso vai salvar meu dia kkkk

[@thenriquedb]

Essa aula me fez perceber que posso refatorar muitos de meus componentes para melhorar a perfomace! Show!

[@andre_zagatti]

Já briguei muito pra fazer esse tipo de coisa antigamente, quando conheci o useImperativeHandle foi o salvador de vidas, já salvei uma galera depois também mostrando como utilizar. Rocketseat sempre com conteúdo pra agregar! 🚀💜

[@rocketseat]

Boaaa André!! Você sempre salvando a galera também!! Valeeu pelo feedback 💜💜

[@elliotalderson5833]

Mais um video show de bola! Eu fazia isso de uma forma bem gambiarra, vendo agora. Eu trabalhei por 7 anos em uma empresa que o lema era "faz o mais rápido possível, não importa como, desde que funcione... (5 minutos depois) já tá pronto??". Nessa pressão toda, não tinha como fazer um código limpo e bem estruturado. Hoje, que tenho toda liberdade e muito mais tempo para implementar meus códigos, é que venho aprimorando essa parte. E os videos da Rocket tem ajudado muito! Valeu!

[@rocketseat]

Valeeeeu Mr. Robot! Pode sempre contar com a gente!! 💜💜🚀

[@gabrielmagevski8362]

Me salvou no desafio de procura de usuarios pela api do github, estava utilizando o state e ele renderizava toda vez o component quando eu digitava algo, pensei em usar o debounce do lodash, porem era necessario pesquisar dps do click do button. OBRIGADO DIEGO!

[@mateusfernandes9230]

Diego, estou feliz por dois motivos, o primeiro que eu consegui pesquisar sobre o que eu precisava implementar e cai no seu video e segundo que suas explicações são muito claras, você fala rápido e de forma clara. Quem deu deslike nesse video é um invejoso kkkkk , você é fera!! Muito obrigado!!!

[@danilovieira4442]

Sou fã demais dessa galera da Rocket. Diegão só metralhando conteúdo 💜

[@rocketseat]

Hahaha valeeeu Danilo!! 😍💜

[@gabriellinassi3382]

Já pensou em dar uma Talk no React Conf? Iria representar bem o Brasil. Ótimo vídeo, Abraço!

[@rogeriomq]

Perfeito a explicação👏🏽👏🏽👏🏽👏🏽👏🏽👏🏽👏🏽, e é por isso que tenho "virado" os olhos pro lado do svelte, react você TEM que se preocupar muito com essa performance. Hook daqui. hook dali, pra ajudar a desenvolver com performance. As vezes a impressão que da é que tem que usar muito artifícios para algo que, no fim das contas, deveria ser simples. ⚙️Acredito muito que o core do react vai passar logo por algumas mudanças que realmente nos levam a codificar de forma mais "límpida". Eu mesmo, nunca, nunca pensei em utilizar o imperativeHandle, duvido muito que alguém olhe para um esboço/rabisco/protótipo/layout de tela e já de cara pensa - Hummm, bem aqui vou usar useRef, fazer o foward e talz.. e depois expor ali com imperativeHandle, pq não é sugestivo, não é atoa que o pessoal do react está parindo o RecoilJS(em comparação com redux e context...)!

[@rocketseat]

Faala Rogerio! Exatamente, isso é algo que fica meio "obscuro" por ali e nem todo mundo sabia bem como usar. Valeeu pelo comentário!! 💜

[@thainachagas4888]

Muito bom!! bem o que eu precisava também. Uma sugestão de conteúdo que procurei e quase não tem, é o uso do material-table com react/typescript de forma avançada, criando componentes usando hooks etc. Sempre vejo conteúdo com formulários mas com tabela é mais difícil

[@AlanSilva-cm8wc]

Tava quebrando a cabeça, e acho esse vídeo, tudo que precisava..

[@vr7life]

Quando vc tá pesquisando sobre o assunto loucamente na internet nos ultimos dias, aí a Rocketseat vem com a faca e o queijo na mão kkkk... Vcs são demais!

[@rocketseat]

Hahahaha dizem por aí que lemos mentes Crisman, vai saber... 🔮😄💜

[@srthiagobrito]

Conteúdo assim a gente já salva na hora

[@rmscrisostomo]

Providencial, esse vídeo bate exatamente com o que eu estava precisando. Obrigado Diego / Rocketseat

[@dkrp6892]

You got a like, a subscriber and a buzzer on from an old guy. TNice tutorials is the best soft soft tutorial I've seen so far. You covered a lot of

[@alessandrocidney562]

Finalmente encontrei algo sobre as refs, obrigado Rocketseat! Estava querendo fazer um componente para upload de fotos "customizado" e precisava de algo que me ajudasse a pegar o arquivo que estava salvo dentro do input dele. Tinha conseguido de outro jeito, mas com as refs fica bem mais fácil kkk

[@luizfelipeop]

"Button nao tem valor" pesado em Diegao ashashash Emotional Damage

[@herberttteixeira4808]

Diego, você explica muito bem! Muito obrigado por compartilhar seu conhecimento com milhares de pessoas.

[@rocketseat]

Faala, Herbertt! Muito obrigado pelo feedback!! 💜💜🚀

[@lucasviegas6991]

Parece que você adivinhou o meu problema, como sempre!!!

[@rocketseat]

Hahahaha 🔮

[@paulomello371]

Sensacional!!! Estava precisando disso. E que forma clara de explicar esses dois hooks... Parabéns Diego

[@jhonatas54]

sensacional , eu estava precisando submeter um formulário ao clicar em uma div que está em um outro componente , eu já estava pensando em usar ref mas com esse forwardRef fechou tudo , e o melhor você fez o video com TypeScript e hooks

[@gabrielnascimento5199]

Faz um vídeo com as funcionalidades mais avançadas que você utilizou até hoje com React!

[@rocketseat]

Boaa, valeeu pela sugestão Gabriel! 💜💜

[@luancardosolc]

Que explicação fantástica de refs! Parabéns pelo conteúdo!

[@leandroreal5258]

Top demais, vídeo curtinho, ótimo pra esse fim de dia

[@rocketseat]

Faala, Leandro!! Valeeu pelo feedback! 💜💜

[@firebergtrue]

Muito massa! Bateu em cima daquilo que eu estava fazendo.

[@rocketseat]

Que massa!! Valeeu pelo feedback, Lindemberg! 💜💜

[@RogerioOrioli]

Salvou esse vídeo hein

Parabéns Rocketseat! Sempre trazendo conteúdos excelentes.

[@rocketseat]

Valeeeeeeu Gabriel!! 💜💜

[@LeonardoRuas]

Baita introdução meu caro. Muito bem explicado... Parabéns.

[@rocketseat]

Valeeeu Leo! 💜

[@naokiadryan8792]

Show! Vídeo incrível e bem explicado. Agora só falta botar a mão na massa kkk

[@LucasSilva-rs3yr]

Acho que seria interessante no próxima aula abordar Sobre a API do Google drive. Como aplicar no backend, enviar informações, consumir informações e tals. E sobre o vídeo, aprendi bastante e já vou aplicar nos meus projetos....

[@rocketseat]

Valeeu pela sugestão, Lucas! 💜💜

[@dirosaki]

Cara do céu, eu amo a rocketseat, mais de 1 hora pesquisando, ai venho aqui e acho a solução kk

[@rocketseat]

AAAAAAAAA! 💜 HAHAHAHA obrigada pelo carinho e que bom que conseguimos te ajudar! 😉 🚀

[@dirosaki]

@@rocketseat magina, o que vocês fazem pela comunidade é surreal. Obrigado!!

[@douglasbernardodev]

Para quem estiver vendo em apr-2021 o RefForwardingComponent está marcado como depreciado então podemos usar o ForwardRefRenderFunction que tem funcionamento similar.

[@luscasleo]

Exatamente o que eu queria aprender sobre. Mais um ótimo conteúdo!!

[@rocketseat]

Que massa Lucas! Valeeu pelo feedback! 💜

[@joaobibiano]

Diego, E no caso de um formulário / tabela com 1000 campos, por exemplo Criar referencias em memórias para cada uma dessas 1000 linhas, traria algum problema de memória para a aplicação?

[@GuuVFX]

.

[@DihCpsPsy]

também queria saber como lidar com ref em casos de muitos inputs.

[@BCDMoura]

Oloco se seu projeto existir 1000 inputs o seu UX não tá fazendo um bom trabalho rs

[@Joaodjtr]

@@BCDMoura Nem sempre. Há alguns casos em que é preciso de bastante dados do usuário, por exemplo quando falamos de dados de empresas: nome fantasia, cnpj, endereço, contato, razão social, etc. E sem contar que nem sempre o programador contará com um bom time de design 🤷

[@salvimateus]

posso estar bem enganado, mas na minha opinião NADA JUSTIFICA 1000 campos em um form... Tem algo errado aí

[@allefdouglas9693]

Engraçado ver como uma funcionalidade fica depreciada tão rápido. Faz nem 1 mês direito que esse vídeo saiu, e o RefForwordingComponent já está depreciado

[@tavareshenrique]

Excelente video, abriu minha mente para varias coisas!

[@natashamatos780]

Muito obrigada

[@EdZava]

Se tem vinheta nova a cada code drops tem like

[@rocketseat]

Opaa! 💜💜

[@neylaniog.soares5760]

Faz videos sempre desse tamanho Diego 🙌

[@ViniciusFeitosaDaSilva]

Excelente vídeo, parabéns pela iniciativa!

[@rocketseat]

Valeu demais pelo feedback, Vinicius! 💜

[@glacialgeladinha2456]

Cês são demais pqp

[@rocketseat]

Valeeeeu Gabriel!! 💜😍

[@waltnj]

Caramba!!!! Em um projeto eu tive que virar um mago pra poder fazer isso sem esse imperativeHandle😵! Bora refatorar 😆. Valeu mais uma vez Diego e pessoal da Rocketseat por esse conteudo TOP!!!🚀👍

[@rocketseat]

Boraa Walter!! Valeeu pelo feedback! 💜💜

[@LeandroOtonii]

Diegão Mãe Dináh, pesquisei esse conteúdo na segunda.

[@rocketseat]

Hahahahahahaha essa é boa! 💜

[@thevexel8253]

OMG, it really worked. Thank you so much!!

[@droom5259]

Vlw! Suas dicas são excelentes

[@rocketseat]

Nós que agradecemos o feedback! 💜 🚀

[@guilhermecardosodealmeida9498]

TOPP Vídeo perfeito, ja me ferrei muito com renderizações em excesso

[@rocketseat]

Hahah faz parte Guilherme! Valeeu pelo feedback! 💜💜

[@alanvidal7155]

Top demais, sobre useImperativeHandle no repo que o Diego passou , ja tem conteudo lá ;)

[@sidneiklein]

Top demais colocaremos na prática!!!!

[@rocketseat]

Boaa! Só vaai Sidnei! 🚀

Diego, faz um vídeo sobre bibliotecas JS externas feitas para o HTML5 tradicional e a melhor prática para se usar elas no React =D

[@rocketseat]

Faala Rafael! Valeeu pela sugestão! 💜💜

[@TheIguana3d]

Thank you very much, you saved me a lot.

[@juniorbytes]

Tenho um Modal q passa muita props... Pensa que p fechar, atualizar, pegar os dados do item da lista, excluir etc, precisa passar por props... Vou utilizar esse conhecimento p melhorar isso... O redux ajudou um pouco, mas... o q faltava era aprender useImperativeHandle kk

[@leonascimento4691]

Que maneiro. Mais um boom 💥

[@GabrielDias-jh1dz]

ajudou dms, muito obrigado

[@feliphebaggio]

Muito bom Diego, valeu pelas excelentes dicas

[@rocketseat]

Valeeeu pelo feedback, Feliphe! 💜💜

[@ALANCOOSTA]

Diego stop blowing my mind!!!!!!!!!!!!!!!!

[@ALANCOOSTA]

Igual o Fallen

[@rocketseat]

Hahahaha 😄😄

[@BRENOG4MES]

UseImperativeHandle , nem conhecia mas já considero pacas 😂😂😂.

[@rocketseat]

Bem prático, né, Breno!? 👀 🤣

[@washingtondasilvaribeiro748]

Top demais Diego. Cara comecei a estudar React-hook-form e queria saber se você tem algum vídeo sobre o assunto e se é uma boa investir nele.

[@paulohenriqueoliveirasanta6092]

Oloco mano, tu disse isso pro proprietário do Unform "lib concorrente" hahahahhahaha. #zueraaaa

[@rocketseat]

Hahahaha não temos sobre ele Washington! Mas é muito interessante conhecer as libs de formulário porque a implementação delas costuma ser semelhante, então vai te ajudar em qualquer outra que precise utilizar. Fica como sugestão esse vídeo que temos sobre o Unform, criado pela Rocketseat que também pode te ajudar nisso! E não tem nada de concorrência não Paulo 😄😄💜💜 kzbin.info/www/bejne/hmeYg32KidaehJY

[@washingtondasilvaribeiro748]

@@paulohenriqueoliveirasanta6092 Quero deixar registrado aqui que tentei usar o react-hook-form com react-native e tive alguns problemas. Problemas esses com pouca documentação para serem solucionados. Aprendi na pratica q o @unform realmente é top.

[@washingtondasilvaribeiro748]

@@rocketseat Vocês estão de parabéns. Sou super fã de vocês . 👌👌👌👌

[@paulohenriqueoliveirasanta6092]

@@washingtondasilvaribeiro748 poxa cara, daora esse feedback. Vou prestar atenção nesses detalhes quando (se) for usar pra RN. Boa monstro!!

[@gabrielfrancelino2389]

Bom demais, salvou a semana!

[@rocketseat]

Boaa! Valeeu pelo feedback, Gabriel! 💜💜

[@tuliocalil]

Curti a camisa Diego!

[@rocketseat]

Hahaha valeeu! 💜

[@LuansClub]

Usei muito para fazer um player personalizado

[@kenedyribeiro1390]

pergunta pro PR: Pq usar o useCallback para as funções relacionadas ao comportamento dos componentes? Em videos mais antigos não era utilizado mas nesse foi usado em larga escala. Deve ser usado apenas quando se trabalha com refs ou faz sentido utilizar em todos os componentes da aplicação?

[@erikmatos7599]

Muito interessante... parabéns

[@rocketseat]

Valeeeu Erik! 💜

[@lucasduarte1603]

quando o vídeo foi lançado já existia o hook useContext? se sim, pq usar o useImperativeHandle ao inves do context?

[@nicolasromero6144]

Boa, obrigado pelo conteúdo, gostaria saber como dockerizar uma aplicação Next.js para produção

[@deborahteixeira1480]

My GMS soft really electric and notNice tutorialng like a app. Any tips how to fix?

[@jhonboandio]

VALEUUUUUUUUUU me salvou!!

[@rocketseat]

Faaaaala, Jhonata! Wooow! Boa! Que massa que te ajudamos de alguma forma! 💜 🚀

[@jeanjunior-dev]

Qual a diferença de expor uma função do componente filho pela props ou pelo useImperativeHandles??

[@hamiceis]

Era isso que eu estava tentando fazer na parte 20:20 , tava tentando achar alguma coisa ... só vocês pra me salvarem..

[@rbltv]

top!

[@wesleypaiva6545]

Alguém sabe qual o modelo de teclado e mouse que ele está usando ali ???

[@marcelxsilva]

RefForwardingComponent is deprecated, use ForwardRefRenderFunction.

[@rocketseat]

Faaala, Marcelo! Valeu demais pela dica! 💜 😍

[@CarlosMansilha]

Diego, neste casos, eu posso usar REF pra tudo? Tipo eu sempre usei o useState.. mas vi q ele sempre está renderizando ...

[@ivanilsonsousa_]

Diegão pq usou useCallback em toda as funções? Ela deve ser usada em todos os casos mesmo?

[@douglastesch8876]

Aproveitando o modal, faz um codedrop abordando a ideia de Portal do React. Salve.

[@rocketseat]

Faala, Douglas! Valeeu pela sugestão! 💜💜

[@pedrooliveira001]

Fazia tempo que procurava estas dicas, muito obrigado por este vídeo!!! Existe alguma forma de declarar um objeto com varias ref? exemplo InputRefs que contenha um array de varios inputs que posso acessar pelo nome

[@phellipelins6788]

Muito massa os hooks. Obrigado por compartilhar. --- Quais os intelisenses e as extensions que tu usa pra programar em React (pra que não usa TypeScript). valeu.

[@SagatyN]

como eu passaria as props para o modal? alguem saberia dizer?

[@laqldannn3585]

G.O.A.T

[@miriamamaral4128]

Pra quem veio consultar sobre o Modal: 22:08

[@robertomota6445]

carai que mto foda

[@tiagooliveiragomes4373]

pq ref não tão usada se ela consegue mudar um elemento sem rederizar novamente? teoricamente deviamos usa-la pra quase tudo nao?

[@highhopes9168]

Olá, gostaria de perguntar quais os benefícios de usar o hook useImperativeHandle ao invés de só setar dentro do filho a referência para a função. Por exemplo: ref.current = { openDialog };

[@douglasoliveira2119]

Fala Diego, ótimo vídeo mas gostaria de saber qual a diferença e em qual momento usaria o createRef() ?

[@arthurtech4LL]

Esse Pop OS com cara de MacOs ficou show hahaha Qual foi a extensão que tu usaste pra colocar esse menu global na barra superior? Abraço Diego e a galera da Rocket.

[@robsong6689]

É o kubuntu. O widget é o "Global Menu".

[@arthurtech4LL]

@@robsong6689 aah, achava que ele usava pop Os. Obrigado

[@OMateusVidal]

Cara, parece que não é Gnome não, ele ta usando KDE Plasma, e ele tem esse menu global nativo, é só ativar nas configs!

[@arthurtech4LL]

@@OMateusVidal vou baixar pra testar

[@rocketseat]

Faaala, Arthur! Hahaha é o Ubuntu com KDE Plasma como a galera falou mesmo. 💜

[@wiltonvieira8201]

Excelente!!

[@rocketseat]

Valeeeeu Wilton! 💜💜

[@luanbresolla4240]

Diegão, faz um vídeo montando o teu setup linux, ensinando a deixar ele igual o seu, tmj.

[@rocketseat]

Faala Luan! Dá uma conferida no canal do Guilherme Rodz aqui da Rocket, ele fez um vídeo mostrando uma personalização muito parecida! 💜

[@rtsemensato]

Conteúdo excelente! Só fiquei com uma dúvida. No caso do acceptTermsRef que vc utilizou para anotar um valor sem re renderizar o componente, eu poderia criar uma variável com let e utilizar pra guardar essa informação? Qual a diferença nesse caso de utilizar o useRef ou criar uma variável?

[@paulorcvieira]

Massa, valeu!!!

[@rocketseat]

Valeeeeeeeu Paulo! 💜

[@mastersorcerer555]

God!

[@rocketseat]

💜💜

[@MarceloFidelis]

Diego, sou um fã e inscrito no seu canal, gostaria de sugerir uma olhada no framework Moleculer e se for do seu interesse um video com o seu ponto de vista. Abraço!

[@rocketseat]

Faala Marcelo! Opa! Valeeu pela sugestão! 💜💜

[@IagoBrayham]

Tenho uma dúvida: Quando adicionei o useImperativeHandle, os testes quebraram, dando mais assertions q o esperado. Como resolver?

[@wylliamrodriguesdias704]

O uso do useCallback foi para as funções passadas por referência não serem criadas novamente?

[@pedrohull]

tambem queria saber, mas me parece que sim.. outro dia vi um problema com o lodash throttle que nao funcionava porque ele recriava a funcao toda hora 👍🏻👍🏻

[@vnn220]

o useCallback tem dois argumentos. o primeiro argumento é qualquer função que você queira armazenar na memória. o segundo argumento é uma array onde você diz pro react em que condições você quer que esta função passada no primeiro input deve ser recriada. se tu criar somente uma função dentro de um componente, toda vez que este componente renderizar novamente esta função será novamente recriada. colocando essa função dentro do useCallback você evita essa recriação pois o react puxa diretamente da memória. se for uma função simples não há necessidade de colocar dentro do useCallback, mas se for uma função bem complexa é bom colocar para ganhos de performance.

[@wylliamrodriguesdias704]

Valeu

[@rocketseat]

Faala Wylliam! Dá uma conferida nesse vídeo aqui que vai te sanar todas as dúvidas sobre o useCallback! 💜 kzbin.info/www/bejne/oH66f4GJrZKgmbc

[@hemerson327]

E lá vamos nós...

[@rocketseat]

Boraaa 🚀🚀

[@AndreLima92]

Fala Diego, blz? Fiquei com uma dúvida, pq vc esta utilizando o useCallback para criar as funções? Eu sempre criei somente como funções anonimas e não percebi diferença no resultado.

[@paulohenriqueoliveirasanta6092]

Funções criadas sem useCallback são recriadas em toda renderização de componente. kzbin.info/www/bejne/iIuqYZyIm7qUj5I O exemplo dado nesse vídeo deixa bem claro.

[@AndreLima92]

@@paulohenriqueoliveirasanta6092 Muito obrigado Paulo, já entendi, mas irei ver o vídeo tbm, vlw.

[@rocketseat]

Faala André! O Paulo resumiu muito bem a diferença. Fica essa outra sugestão para entender melhor o useCallback: kzbin.info/www/bejne/oH66f4GJrZKgmbc

[@LeonardoSantos-ii2mo]

Finalmente posso parar de usar o querySelector pra abrir meus modals

[@rocketseat]

Hahahaha boaa Leo! 💜