Melhore a PERFORMANCE da sua aplicação REACT usando essas duas técnicas poderosas

  Рет қаралды 7,875

Fernanda Kipper | Dev

Fernanda Kipper | Dev

Күн бұрын

Пікірлер
@kipperdev
@kipperdev Жыл бұрын
🚨 CURSO de REACT JS para alavancar seus conhecimentos: www.rocketseat.com.br/ignite?KIPPERDEV-none-none-none-none-redes_kipperdev&referral=kipperdev&coupon=KIPPERDEV@IGNITE CUPOM: KIPPERDEV@IGNITE
@antonysantos9450
@antonysantos9450 Жыл бұрын
Anos trabalhando com react e n tinha ideia que existia um hook nativo pra debounce, ótimo vídeo.
@arthurteodoro6586
@arthurteodoro6586 Жыл бұрын
esse hook foi adicionando na versão 18 do React se não estou enganado
@RafaelaSilva-zz3dx
@RafaelaSilva-zz3dx Жыл бұрын
Otimo vídeo, arrasando como sempre!!!
@viniciusclemente5119
@viniciusclemente5119 Жыл бұрын
Muito interessante o conteúdo, já assisti o vídeo do desafio da Rocket e vou seguir maratonando kkkk parabéns pelo trabalho e excelente conteúdo 😁
@lordbluue3456
@lordbluue3456 Жыл бұрын
Muito bacana Fernanda! não sábia dessas técnicas, irei começar a usar!
@kipperdev
@kipperdev Жыл бұрын
Que bom que gostou!! 😊
@marlonoliveira4822
@marlonoliveira4822 Жыл бұрын
Sempre usei a Lib lodash para fazer debounce vou testar esse hook da próxima. Vlw Fernanda ❤
@kipperdev
@kipperdev Жыл бұрын
Boa, lodash é uma ótima opção também, que bom que gostou Marlon! 🥰
@joaoleno7700
@joaoleno7700 Жыл бұрын
Que aula sensacional, não conhecia esses hoks. Ganhou um inscrito
@kipperdev
@kipperdev Жыл бұрын
Muito obrigadaa, João 💜 Esses hooks são bem úteis!
@darioreisjr
@darioreisjr Жыл бұрын
Show gostei o UseMemo já conhecia e usava, ja o useDeferredValue não conhecia agora faz parte da minha galeria de hooks....obrigado pela Dica
@kipperdev
@kipperdev Жыл бұрын
Boa, o useMemo é mais conhecido, mas o useDefferedValue foi um hook introduzido as novas versões do React em 2022, por isso não é tão conhecido, mas ele é muitoo útil. Fico feliz que gostou! 😃
@pphenriquelm
@pphenriquelm Жыл бұрын
Muito bom! Obrigado pelas infos!
@kipperdev
@kipperdev Жыл бұрын
Valeu Pedro!! 😊
@jhonnyfreire
@jhonnyfreire Жыл бұрын
Muito legal, parabéns pelo vídeo.
@kipperdev
@kipperdev Жыл бұрын
Valeuu Jhonny!
@michaeladafne4705
@michaeladafne4705 Жыл бұрын
Que vídeo perfeito, aff
@626teteu
@626teteu Жыл бұрын
A nova intro ficou top demais
@kipperdev
@kipperdev Жыл бұрын
Valeuu Matheus!
@olokinhomewwww550
@olokinhomewwww550 Жыл бұрын
Essa mesma técnica poderia ser usada para um autocomplete nas buscas para fazer a request para uma API? Por exemplo, um input onde o usuário digita o nome de uma cidade e invés de ter um useEffect ouvindo esse input e a cada tecla ele fazer uma requisição, este useEffect ouvir o deferedValue?
@kipperdev
@kipperdev Жыл бұрын
Simm! Esse exemplo é perfeito, por que assim você diminui o número de requests que você irá precisar fazer ao backend também, ao invés de uma nova requisição a cada tecla digitada, ele só vai fazer a requisição quando o usuário “parar de digitar” por alguns milissegundos.
@mateusoliveira3286
@mateusoliveira3286 Жыл бұрын
Seria interessante nesse caso, utilizar um debounce com useCallback. Assim não vai fazer requisições desnecessárias enquanto digita no campo.
@alecdocouto3551
@alecdocouto3551 Жыл бұрын
Muito bom! Conheci ontem e achei show ;D parabéns
@kipperdev
@kipperdev Жыл бұрын
Valeu Alec! Que bom que gostou 😃
@jonatassantos7779
@jonatassantos7779 Жыл бұрын
aula top!!!
@kipperdev
@kipperdev Жыл бұрын
Valeu Jonatas!! :)
@herminio7754
@herminio7754 Жыл бұрын
Aula mto show! Didática excelente! Qual tema vc utiliza no vscode?
@kipperdev
@kipperdev Жыл бұрын
Valeu Herminio!! Eu uso o tema Emerald ☺️
@Sk8luckas
@Sk8luckas Жыл бұрын
Uma dúvida que talvez possa ser besta: Assim como no exemplo (1:53) ai quando a lista ultraprassa o "tamanho" da div rosa ele nao aumenta ela e sim "acaba" e fica branca, como "corrigir" isso? Pra div acompanhar o tamanho da lista?
@mateusoliveira3286
@mateusoliveira3286 Жыл бұрын
1 - Deixa a div rosa com uma altura mais dinâmica, tipo um height: 100% por exemplo (existem outras formas de fazer isso, ai vale analisar o que seria melhor) 2 - Adicionar um scroll na lista para que não ultrapasse o limite do elemento "pai"
@kipperdev
@kipperdev Жыл бұрын
Como o Matheus falou, existe mais de uma opção! Normalmente se você quer mostrar toda a lista extensão na tela, usamos a primeira opção, deixando o tamanho do componente pai (que está por volta da lista que tem cor rosa) com height dinâmico, por que nessa aplicação eu tinha deixado ele com height fixo de 100vh (para ocupar somente o tamanho da tela). Mas caso não quiséssemos esse scroll da tela e sim um scroll dentro do componente pai, podemos usar a segunda opção como o Matheus mencionou, colocando o componente pai com um overflow: auto por exemplo, assim tudo que ultrapassar o tamanho dele ele vai transformar em um scroll interno. Espero que tenha ficado mais claro ☺️ (ps: nenhuma pergunta é besta, quem pergunta está querendo aprender e melhorar, então perguntas são sempre válidas 💜)
@brenda_68
@brenda_68 Жыл бұрын
Eu tô perdido, quero ser programado e até já fiz um curso de javascript aq pelo yt e estava fazendo um curso que comprei na udemy, mas eu tenho muita dificuldade, sei praticamente zero de html e css, não sei como usar as tags e etc. Tenho muito desanimo devido a me sentir perdido e não saber o que estudar e nem a maneira certa, pensei em fazer uma faculdade de desenvolvimento web mas dizem que nem precisa, o que vc me indica a estudar primeiro pra sair do zero e realmente aprender algo e ter chance de ser programador?
@leonardobarrocal
@leonardobarrocal Жыл бұрын
Opa, fala ai carinha, tranquilo? E normal ficar perdido, hoje em dia tem muita informacao e acaba dificultando as coisas... Eu indico a plataforma da Rocketseat para voce, la eles tem o programa discover (free) e nele aborda o basico para comecar. Realiza os 3 modulos disponiveis nesse programa, depois dele voce vai entender como as coisas funcionam e vai conseguir ter uma ideia melhor sobre a programacao e o que fazer depois...
@didigomes123
@didigomes123 Жыл бұрын
caramba, tu explica mto bem!! Vlwwww Sou iniciante ainda e isso me ajudou a entender melhor alguns hooks.
@kipperdev
@kipperdev Жыл бұрын
Obrigadaa Diego!! Boa, fico feliz que ajudou você a entender melhor 🚀👊🏻
@andersonsantosqueiroz6165
@andersonsantosqueiroz6165 Жыл бұрын
very thanksss
@kipperdev
@kipperdev Жыл бұрын
You're welcomeee 💜
@spoteca5610
@spoteca5610 Жыл бұрын
Vc é muita parecida com uma ex namorada que amei MT no passado, me apaixonei na hora. 😅 Tem até às covinhas...
@henriquecastelobrancodacos6018
@henriquecastelobrancodacos6018 Жыл бұрын
Eu acho que seria uma ótima ideia você aprender C++ linguagem de "baixo nível", como você e engenheira de software seria uma boa, eu já aprendi C++ na minha opinião muito boa, eu tinha aprendido Rust Lang Amei Criei vários jogos e tals, o problema da Rust e que ela é muito nova. Na minha opinião C++ e C são as melhores linguagens pra criar Sistemas Operacionais e Jogos, o desempenho e excelente, sei que desempenho não único quesito pra Analizar a Linguagem, mais ela é excelente testa ela. Boa sorte Bye.
@kipperdev
@kipperdev Жыл бұрын
Valeu pela sugestão! Na faculdade tive bastante cadeiras que envolviam programar em C (inclusive Sistemas Operacionais que vou cursar agora), então tenho um conhecimento básico da linguagem. Mas me encontrei no mundo do desenvolvimento Web, é o que gosto de fazer 😊
@henriquecastelobrancodacos6018
@henriquecastelobrancodacos6018 Жыл бұрын
@@kipperdev boa, se você gosta siga em frente kk, eu era mais do lado de desenvolver Sistemas e Jogos, é legal, divertido tenta uma vez, é de boa. Eu não sei sinto algo quando eu fazia um joguinho é meio que um orgulho, é ainda ver os outros jogando aí que lindo. Uma vez fui assistir KZbin aí coloquei em um vídeo de JavaScript, HTML,CSS, Olha kkkk tentei reproduzir o que eu aprendi em 4 vídeos. Peguei o computador e fui mexer, também dei aquela mexida básica no navegador hm.. confesso que e divertido. Um dia eu espero Criar um mega sistema que suprime todas necessidades dos usuários. Porém não vai dar, parei de Programar ah anos kkkkkk Goodbye
CLONANDO HOME PAGE DA APPLE COM HTML+CSS
1:15:30
Fernanda Kipper | Dev
Рет қаралды 30 М.
Aprenda REACT HOOKS em 30 minutos | Tutorial sobre Hooks
26:48
Fernanda Kipper | Dev
Рет қаралды 18 М.
When you have a very capricious child 😂😘👍
00:16
Like Asiya
Рет қаралды 18 МЛН
Mom Hack for Cooking Solo with a Little One! 🍳👶
00:15
5-Minute Crafts HOUSE
Рет қаралды 23 МЛН
Сестра обхитрила!
00:17
Victoria Portfolio
Рет қаралды 958 М.
A maneira CERTA de consumir APIs REST no React usando React Query
26:14
Fernanda Kipper | Dev
Рет қаралды 16 М.
Micro Frontends Crash Course with React & Webpack 5 Module Federation
1:11:37
Create components in this way in React (Composition Pattern)
24:47
O ERRO mais comum no React (você já fez isso)
13:26
Rocketseat
Рет қаралды 128 М.
Como testar aplicações React usando Jest & Testing Library
44:16
Fernanda Kipper | Dev
Рет қаралды 44 М.
The React Interview Questions You need to Know
21:29
CoderOne
Рет қаралды 49 М.
When you have a very capricious child 😂😘👍
00:16
Like Asiya
Рет қаралды 18 МЛН