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!
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!
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!!!
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! 🚀💜
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
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...)!
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
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
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
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!
Para quem estiver vendo em apr-2021 o RefForwardingComponent está marcado como depreciado então podemos usar o ForwardRefRenderFunction que tem funcionamento similar.
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!!!🚀👍
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....
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?
4 года назад+2
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
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
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 😄😄💜💜 ruclips.net/video/P65RJTTqkN4/видео.html
@@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.
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.
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
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?
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?
@@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 🤷
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
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 };
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!
meio perigoso ensinar isso sakoasko, muita gente vai pensar que tem que usar isso pra tudo. como você falou no final do vídeo pode usar só que no lugar certo :)
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.
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 👍🏻👍🏻
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.
Fala Diego na paz, uma dúvida relacionado a renderização dos componentes, se um componente filho passar um valor para o componente pai através de uma props, bem similar a uma props onChange, ainda assim o componente pai vai ser renderizado novamente?
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.
Funções criadas sem useCallback são recriadas em toda renderização de componente. ruclips.net/video/RZG0iRfUaY0/видео.html O exemplo dado nesse vídeo deixa bem claro.
Faala André! O Paulo resumiu muito bem a diferença. Fica essa outra sugestão para entender melhor o useCallback: ruclips.net/video/jMWNNSx-mcU/видео.html
Era disso que eu precisava kkk, tava quebrando a cabeça com ref ontem, continuem trazendo conteúdos avançados
Boaa Guilherme!! Valeeu pelo feedback!! 💜💜
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!
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!
Valeeeeu Mr. Robot! Pode sempre contar com a gente!! 💜💜🚀
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!!!
Essa aula me fez perceber que posso refatorar muitos de meus componentes para melhorar a perfomace! Show!
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! 🚀💜
Boaaa André!! Você sempre salvando a galera também!! Valeeu pelo feedback 💜💜
Trabalho nobre de instruir o mundo.Está de parabéns Diego.
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!!
Boa! HAHAHAHA
É muito gostosinha de ouvir, né, Marcella? 💜 😍
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
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...)!
Faala Rogerio! Exatamente, isso é algo que fica meio "obscuro" por ali e nem todo mundo sabia bem como usar. Valeeu pelo comentário!! 💜
Valeu mesmo Diego, é muito difícil encontrar conteúdo avançado e acho que isso vai salvar meu dia kkkk
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
"Button nao tem valor" pesado em Diegao ashashash Emotional Damage
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
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
Tava quebrando a cabeça, e acho esse vídeo, tudo que precisava..
Conteúdo assim a gente já salva na hora
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!
Hahahaha dizem por aí que lemos mentes Crisman, vai saber... 🔮😄💜
Diego, você explica muito bem! Muito obrigado por compartilhar seu conhecimento com milhares de pessoas.
Faala, Herbertt! Muito obrigado pelo feedback!! 💜💜🚀
"Ah agora eu entendi, agora todas as peças se encaixaram"
Hahahaha 😊💜
Providencial, esse vídeo bate exatamente com o que eu estava precisando. Obrigado Diego / Rocketseat
Sensacional!!! Estava precisando disso. E que forma clara de explicar esses dois hooks... Parabéns Diego
Para quem estiver vendo em apr-2021 o RefForwardingComponent está marcado como depreciado então podemos usar o ForwardRefRenderFunction que tem funcionamento similar.
Que explicação fantástica de refs! Parabéns pelo conteúdo!
Já pensou em dar uma Talk no React Conf? Iria representar bem o Brasil. Ótimo vídeo, Abraço!
Sou fã demais dessa galera da Rocket. Diegão só metralhando conteúdo 💜
Hahaha valeeeu Danilo!! 😍💜
Parece que você adivinhou o meu problema, como sempre!!!
Hahahaha 🔮
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!!!🚀👍
Boraa Walter!! Valeeu pelo feedback! 💜💜
Faz um vídeo com as funcionalidades mais avançadas que você utilizou até hoje com React!
Boaa, valeeu pela sugestão Gabriel! 💜💜
Muito massa! Bateu em cima daquilo que eu estava fazendo.
Que massa!! Valeeu pelo feedback, Lindemberg! 💜💜
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....
Valeeu pela sugestão, Lucas! 💜💜
Cara do céu, eu amo a rocketseat, mais de 1 hora pesquisando, ai venho aqui e acho a solução kk
AAAAAAAAA! 💜
HAHAHAHA obrigada pelo carinho e que bom que conseguimos te ajudar! 😉 🚀
@@rocketseat magina, o que vocês fazem pela comunidade é surreal. Obrigado!!
Top demais, vídeo curtinho, ótimo pra esse fim de dia
Faala, Leandro!! Valeeu pelo feedback! 💜💜
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
Excelente video, abriu minha mente para varias coisas!
Baita introdução meu caro. Muito bem explicado... Parabéns.
Valeeeu Leo! 💜
Parabéns Rocketseat! Sempre trazendo conteúdos excelentes.
Valeeeeeeu Gabriel!! 💜💜
Show! Vídeo incrível e bem explicado. Agora só falta botar a mão na massa kkk
Muito obrigada
Exatamente o que eu queria aprender sobre. Mais um ótimo conteúdo!!
Que massa Lucas! Valeeu pelo feedback! 💜
Se tem vinheta nova a cada code drops tem like
Opaa! 💜💜
Faz videos sempre desse tamanho Diego 🙌
Top demais colocaremos na prática!!!!
Boaa! Só vaai Sidnei! 🚀
TOPP Vídeo perfeito, ja me ferrei muito com renderizações em excesso
Hahah faz parte Guilherme! Valeeu pelo feedback! 💜💜
Top demais, sobre useImperativeHandle no repo que o Diego passou , ja tem conteudo lá ;)
Excelente vídeo, parabéns pela iniciativa!
Valeu demais pelo feedback, Vinicius! 💜
Salvou esse vídeo hein
Que maneiro. Mais um boom 💥
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?
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
Faala Rafael! Valeeu pela sugestão! 💜💜
Diegão Mãe Dináh, pesquisei esse conteúdo na segunda.
Hahahahahahaha essa é boa! 💜
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
Muito bom Diego, valeu pelas excelentes dicas
Valeeeu pelo feedback, Feliphe! 💜💜
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.
Oloco mano, tu disse isso pro proprietário do Unform "lib concorrente" hahahahhahaha.
#zueraaaa
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 😄😄💜💜
ruclips.net/video/P65RJTTqkN4/видео.html
@@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.
@@rocketseat Vocês estão de parabéns. Sou super fã de vocês . 👌👌👌👌
@@washingtondasilvaribeiro748 poxa cara, daora esse feedback. Vou prestar atenção nesses detalhes quando (se) for usar pra RN. Boa monstro!!
Pra quem veio consultar sobre o Modal: 22:08
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.
OMG, it really worked. Thank you so much!!
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
Fala Diego, ótimo vídeo mas gostaria de saber qual a diferença e em qual momento usaria o createRef() ?
Bom demais, salvou a semana!
Boaa! Valeeu pelo feedback, Gabriel! 💜💜
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?
Vlw! Suas dicas são excelentes
Nós que agradecemos o feedback! 💜 🚀
Muito interessante... parabéns
Valeeeu Erik! 💜
Cês são demais pqp
Valeeeeu Gabriel!! 💜😍
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?
.
também queria saber como lidar com ref em casos de muitos inputs.
Oloco se seu projeto existir 1000 inputs o seu UX não tá fazendo um bom trabalho rs
@@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 🤷
posso estar bem enganado, mas na minha opinião NADA JUSTIFICA 1000 campos em um form... Tem algo errado aí
Thank you very much, you saved me a lot.
quando o vídeo foi lançado já existia o hook useContext? se sim, pq usar o useImperativeHandle ao inves do context?
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
ajudou dms, muito obrigado
Qual a diferença de expor uma função do componente filho pela props ou pelo useImperativeHandles??
Boa, obrigado pelo conteúdo, gostaria saber como dockerizar uma aplicação Next.js para produção
Usei muito para fazer um player personalizado
Diego stop blowing my mind!!!!!!!!!!!!!!!!
Igual o Fallen
Hahahaha 😄😄
UseImperativeHandle , nem conhecia mas já considero pacas 😂😂😂.
Bem prático, né, Breno!? 👀 🤣
Diegão pq usou useCallback em toda as funções? Ela deve ser usada em todos os casos mesmo?
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 };
Curti a camisa Diego!
Hahaha valeeu! 💜
Diego, neste casos, eu posso usar REF pra tudo? Tipo eu sempre usei o useState.. mas vi q ele sempre está renderizando ...
Excelente!!
Valeeeeu Wilton! 💜💜
Aproveitando o modal, faz um codedrop abordando a ideia de Portal do React. Salve.
Faala, Douglas! Valeeu pela sugestão! 💜💜
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!
Faala Marcelo! Opa! Valeeu pela sugestão! 💜💜
G.O.A.T
VALEUUUUUUUUUU me salvou!!
Faaaaala, Jhonata! Wooow! Boa! Que massa que te ajudamos de alguma forma! 💜 🚀
Era isso que eu estava tentando fazer na parte 20:20 , tava tentando achar alguma coisa ... só vocês pra me salvarem..
meio perigoso ensinar isso sakoasko, muita gente vai pensar que tem que usar isso pra tudo. como você falou no final do vídeo pode usar só que no lugar certo :)
Hahahah faz parte, como qualquer funcionalidade precisamos sempre analisar o que faz mais sentido para cada situação!! 😄💜💜
E lá vamos nós...
Boraaa 🚀🚀
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.
É o kubuntu. O widget é o "Global Menu".
@@robsong6689 aah, achava que ele usava pop Os. Obrigado
Cara, parece que não é Gnome não, ele ta usando KDE Plasma, e ele tem esse menu global nativo, é só ativar nas configs!
@@OMateusVidal vou baixar pra testar
Faaala, Arthur! Hahaha é o Ubuntu com KDE Plasma como a galera falou mesmo. 💜
Diegão, faz um vídeo montando o teu setup linux, ensinando a deixar ele igual o seu, tmj.
Faala Luan! Dá uma conferida no canal do Guilherme Rodz aqui da Rocket, ele fez um vídeo mostrando uma personalização muito parecida! 💜
top!
Finalmente posso parar de usar o querySelector pra abrir meus modals
Hahahaha boaa Leo! 💜
O uso do useCallback foi para as funções passadas por referência não serem criadas novamente?
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 👍🏻👍🏻
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.
Valeu
Faala Wylliam! Dá uma conferida nesse vídeo aqui que vai te sanar todas as dúvidas sobre o useCallback! 💜
ruclips.net/video/jMWNNSx-mcU/видео.html
Fala Diego na paz, uma dúvida relacionado a renderização dos componentes, se um componente filho passar um valor para o componente pai através de uma props, bem similar a uma props onChange, ainda assim o componente pai vai ser renderizado novamente?
Faala Alisson! Dá uma conferida nesse vídeo aqui que deve tirar a sua dúvida! 💜
ruclips.net/video/jMWNNSx-mcU/видео.html
Massa, valeu!!!
Valeeeeeeeu Paulo! 💜
RefForwardingComponent is deprecated, use ForwardRefRenderFunction.
Faaala, Marcelo!
Valeu demais pela dica! 💜 😍
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.
Funções criadas sem useCallback são recriadas em toda renderização de componente.
ruclips.net/video/RZG0iRfUaY0/видео.html
O exemplo dado nesse vídeo deixa bem claro.
@@paulohenriqueoliveirasanta6092 Muito obrigado Paulo, já entendi, mas irei ver o vídeo tbm, vlw.
Faala André! O Paulo resumiu muito bem a diferença. Fica essa outra sugestão para entender melhor o useCallback:
ruclips.net/video/jMWNNSx-mcU/видео.html
Tenho uma dúvida: Quando adicionei o useImperativeHandle, os testes quebraram, dando mais assertions q o esperado. Como resolver?
Por curiosidade, qual teclado você está usando?
Qual switch dele?
Faaaala, Vinicius!
É o Keychron K2 switch blue! 😉 💜
My GMS soft really electric and notNice tutorialng like a app. Any tips how to fix?
pq ref não tão usada se ela consegue mudar um elemento sem rederizar novamente? teoricamente deviamos usa-la pra quase tudo nao?
Essa parte do forwardRef vale também para react native em um TextInput por exemplo?
Faala, Felipe! Pode sim, sem problemas! 💜