Quando você deveria utilizar o useMemo no ReactJS?
Вставка
- Опубліковано 10 лют 2025
- No ReactJS, o hook useMemo desempenha um papel fundamental na otimização, especialmente em componentes que renderizam frequentemente.
Ele permite que os desenvolvedores memorizem o valor de retorno de uma função e o reutilizem sempre que as dependências específicas permanecerem inalteradas.
Porém, devemos utilizá-lo com cautela, pois, dependendo do caso, ele pode trazer problemas de performance ao invés de otimização.
Já vi situações onde o useMemo estava sendo utilizado em funções que retornam uma string simples, o que não faz sentido nenhum. O mesmo acontece com outros hooks de memoization como useCallback e o memo.
---
🔴🔴🔴 NÃO LEIA 🔴🔴🔴
✅ Curso de Next.js 13:
hotm.art/lA0ujDcw
📷 Segue lá no Instagram:
/ devjunioralves
💭 Participe da nossa comunidade no Discord:
/ discord
🧑💻 Repositório do canal:
github.com/jju...
𝗢𝗦 𝗠𝗘𝗟𝗛𝗢𝗥𝗘𝗦 𝗩𝗜𝗗𝗘𝗢𝗦 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟:
7 CONCEITOS DO TYPESCRIPT QUE VOCÊ DEVE SABE
• 7 CONCEITOS DO TYPESCR...
Signals no React.js?!
• Signals no React.js?!
QUAL A MELHOR ESTRUTURA DE PASTAS PARA PROJETOS REACT/NEXT.JS
• QUAL A MELHOR ESTRUTUR...
COMO APLICAR SOLID NO REACT - Inversão de dependência DIP
• COMO APLICAR SOLID NO ...
[ROADMAP] O QUE VOCÊ DEVERIA ESTUDAR EM 2O23? Fique de olho nessas tecnologias
• [ROADMAP] O QUE VOCÊ D...
TUTORIAL NEXT.JS 13: FETCHING DATA - PARTE 3/3
• TUTORIAL NEXT.JS 13: F...
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
• A FORMA CORRETA DE CRI...
QUANDO NÃO UTILIZAR ESTADOS NO REACT?
• QUANDO NÃO UTILIZAR ES...
MELHORE A USABILIDADE DE SUAS APLICAÇÕES COM ISSO
• MELHORE A USABILIDADE ...
TUTORIAL NEXT.JS 13: VALE A PENA MIGRAR? PARTE 1/3
• TUTORIAL NEXT.JS 13: V...
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
• A FORMA CORRETA DE CRI...
---
Livros que me ajudaram:
Código Limpo
amzn.to/3hHXVKY
Arquitetura Limpa
amzn.to/3Viqw7v
Como ser um programador melhor
amzn.to/3POQ5fq
Estruturas de dados e algoritmos com JavaScript
amzn.to/3hM0L1u
Entendendo Algoritmos: Um guia ilustrado para programadores e outros curiosos
amzn.to/3BWsaEO
14 hábitos de desenvolvedores altamente produtivos
amzn.to/3uZqsyy
Hábitos Atômicos
amzn.to/3FGllIM
Aprendendo a Aprender
amzn.to/3WxM0hG
Rápido e devagar
amzn.to/3PLrYhq
A vida dos Estoicos
amzn.to/3vaQIGl
Meditações de Marco Aurélio
amzn.to/3joFYS1
*Links afiliados.
---
👋 Você pode me encontrar aqui:
🧑💻 Blog: www.devjuniorp...
💼 LinkedIn: / junior-alves-b66a10127
💻 GitHub: github.com/jju...
📷 Instagram: / devjunioralves
👨💻 Sobre mim
Eu sou Junior, Senior Frontend Engineer! Tenho mais de 4 anos de experiência.
Aqui, compartilho conteúdo sobre React.js, Next.js, TypeScript, JavaScript, testes, livros, SOLID e tudo mais relacionado à desenvolvimento de software.
✉️ Email comercial
devjuniorplus@gmail.com
📌 Utilidades
Editor: VS Code
Tema: Illusion
Music provided by NoCopyrightSounds.
#reactjs #typescript #nextjs
✅ O novo hook do ReactJS:
ua-cam.com/video/Nd539M-6Xds/v-deo.html
✅ O problema do ReactNode no ReactJS + TS:
ua-cam.com/video/ydNmBISYER4/v-deo.html
✅ Nextjs 14 com problemas de cache?!
ua-cam.com/video/ApIZM637d2g/v-deo.html
✅ ReactJS hooks + SOLID?
ua-cam.com/video/BpBxKDDAd-Y/v-deo.html
---
👉 Livros importantes:
Lógica de Programação e Algoritmos com JavaScript:
amzn.to/48Cj65Z
JavaScript: O Guia Definitivo:
amzn.to/48jh9vp
Como ser um programador melhor
amzn.to/48WYGVj
Arquitetura Limpa (Clean Arch)
amzn.to/3Viqw7v
Clean Code
amzn.to/3hHXVKY
Estruturas de dados e algoritmos com JavaScript
amzn.to/49FOzFd
---
✅ Segue lá no Instagram:
instagram.com/devjunioralves/
✅ Nossa comunidade no Discord:
discord.com/invite/bVxW4Dhgrf
sugestão de video: como fazer redirecionamento de usuarios baseado no jwt.. exemplo, jwt retorna usuario tipo 1, tem acesso a tais funcionalidades, usuario tipo 2, tem acesso a outras funcionalidades
Opa, valeu pela sugestão!!!
Super apoio a ideia, mal vi sobre esse assunto no UA-cam.
Ótimo conteúdo! Poderia mostrar um exemplo de performance usando o useCallback?
👏👏👏 conteudo de qualidade
Valeu Mateus! 👊
Excelente material
Salve Junior, baita vídeo, poderia fazer um conteúdo do seu nível para react query, explicando os detalhes dela e como funciona. Valeeeu top demais
E se colocasse o const selectedItem para fora do componente?
E no caso de uma requisição em uma api seria possível criar um cash e só atualizar por exemplo em uma paginação?
amigo, o seu curso cobre esses assuntos sobre memo, useMemo e outras otimizações de sistema?
Estou bastante interessado.
Parabéns pelo trabalho.
Faz um vídeo de como configurar o arquivo next.config para buildar em prod uma aplicação
Show! Amigo pode passar a lista dos plug-ins do vscode que vc usa?
Também queria saber qual extensão é essa que dá pra ver os retornos dentro do vscode, parece ser um debug
Opa, já tem um vídeo aqui no canal onde mostro, é o vídeo da home do canal, confere lá, tu vai curtir!
faz um video do uso do next/dynamic import?
Junior, tudo bom? Uma dúvida que tenho: usando memo em tudo, quando teríamos notável perda de performance?
Qual e essa extensão console.log para ver os resultados dentro do codigo?
Console ninja
Só instalar a extensão e ele loga desse jeito aí
Exatamente Gabriel!
Valeu
Ao usar o "useMemo", vc. passa no 2o argumento o valor "[items]". Precisaria? o "items" não modifica, assim, poderia tirar esse argumento. Poderia verificar
Sim, nesse caso ele não muda, porém, ainda sim nesse caso, é necessário adicioná-lo, pois é uma dependência externa.
Recomendo tu utilizar a extensão do Eslint chamada react-hooks/exhaustive-deps.
se você quiser que sua aplicação ganhe perfomance também, é só trocar react por flutter, fica a dica
Se o foco somente performance, melhor ir pra assembly 😂😂😂
@@devjunioralves faz sentido, só que a curva de aprendizado e a produtividade em assembly inviabilizam a prática