O que você PRECISA saber para DOMINAR os HOOKS

O que você PRECISA saber para DOMINAR os HOOKS | React

Рет қаралды 3,980

Жыл бұрын

Custom hooks são funções em React.js que permitem encapsular lógicas comuns em um componente React para que possam ser reutilizadas em vários componentes diferentes. Eles são uma maneira de compartilhar funcionalidades entre componentes sem a necessidade de criar componentes adicionais ou adicionar complexidade desnecessária ao código.
INFORMAÇÕES IMPORTANTES 👇
Participe da nossa comunidade no Discord:
/ discord
𝗢𝗦 𝗠𝗘𝗟𝗛𝗢𝗥𝗘𝗦 𝗩𝗜𝗗𝗘𝗢𝗦 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟:
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 APLICAÇÕ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.devjuniorplus.com.br
💼 LinkedIn: / junior-alves-b66a10127
💻 GitHub: github.com/jjunior96
📷 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 #nextjs #frontend #web #typescript #javascript #tips #dev

Пікірлер: 37

@devjunioralves Жыл бұрын

NFORMAÇÕES IMPORTANTES 👇 O hook mais poderoso (e subestimado) React.js: kzfaq.info/get/bejne/rZ9in8Vjzp-cqoU.html Livros que eu recomendo pra você: Código Limpo amzn.to/3hHXVKY Como ser um programador melhor amzn.to/3POQ5fq Arquitetura Limpa amzn.to/3Viqw7v 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

@half7752 Жыл бұрын

junior, c sabe se tem algo parecido com custom hooks no angular? tô tendo q aprender angular no trampo e não consigo parar de pensar nos neles KKKK po tô feliz e triste ao mesmo tempo de tá tendo q trabalhar com o angular, parece que tudo q vim estudando esses últimos meses não vai me servir tanto agora. mas tem muita coisa incrível que vou poder reaproveitar por sua causa junior. separação de responsabilidades, testes, solid, forma de pensar em como resolver problemas e se preocupar de verdade com a qualidade do codigo. seus ensinamentos vão muito alem do react, é pra carreira mesmo! fico muito feliz de ter encontrado seu canal a uns meses atrás de verdade, vc mudou completamente a minha forma de ver as coisas. obrigado junior!!

@devjunioralves Жыл бұрын

Fala Rafa! Cara, fico muito feliz com seus comentários, saber que estar evoluindo tanto. Muito obrigado por compartilhar, esse feedback é super importante pra mim. Sobre sua dúvida, infelizmente eu não sei, utilizei Angular há muitos anos atrás, sei que ele evoluiu muito de lá pra cá. Espero que alguém que tenha experiência com Angular possa te ajudar. Posta no nosso Discord lá também, creio que a galera consegue te ajudar.

@carloscafejs Жыл бұрын

Comentando pra dar uma força, começando agora e pra mim muita coisa é grego, mas desde quando comecei a estudar até hoje já entendo muito do que vc diz e isso é mt gratificante pra mim, ou seja seu conteúdo tem sido um parâmetro incrível pra medir minha evolução. Força e sucesso, !!

@devjunioralves Жыл бұрын

Incrível Carlos! Fico muito feliz que esteja começando e que os conteúdos estejam ajudando nessa jornada, de verdade. Parabéns por sua evolução, continue sempre estudando que você vai longe.

@leonardonunesfreitas1547 Жыл бұрын

Que aula top está de parabéns mano venho aprendendo muito com você obrigado por mais uma aula incrível !!

@devjunioralves Жыл бұрын

Que massa mano! Fico feliz que você curtiu a aula 👊

@luigiremor1829 Жыл бұрын

Junior, ia ser top demais um video mexendo com mui e react hook forms pra mostrar o controle de components

@devjunioralves Жыл бұрын

Excelente ideia Luigi, posso trazer sim!

@lknlkn15 Жыл бұрын

Valeu por mais um conteúdo esclarecedor.

@devjunioralves Жыл бұрын

Tmj man 👊

@luigiremor1829 Жыл бұрын

Almocinho com pílula de conhecimento 🤩

@devjunioralves Жыл бұрын

Haha que show!

@johnnydeymisson1842 Жыл бұрын

Já tinha assistido umas 3x esse vídeo, deixava rolando e só ouvindo, hoje parei para assistir de "cabo" a "rabo", muito bom mesmo mano, entendi muito bem! Fiquei com algumas dúvidas por exemplo, no caso de useEffect, como eu aplicaria, querendo ou não ele vai ser relacionado a parte lógica, como que ele ia se aplicar ali, criaria uma função e passava ele dentro e só chamava ela ali no index do componente?

@laysaviana2 11 ай бұрын

Você disponibiliza o código das suas aulas em algum lugar?

@pcfmello 7 ай бұрын

Uma dúvida... Os states e funções que fazem modificações visuais, como abrir e fechar uma modal e outras coisas que alteram o comportamento visual, eu crio no componente ou em crio dentro do hook desse componente? Qual a melhor forma? Obrigado!

@JoaoLucas-qh8xd Жыл бұрын

Top demais o vídeo Júnior, fiquei com uma dúvida vendo você exportar o useCounter no próprio arquivo dele e depois você exporta novamente em outro arquivo, poderia me explicar o porquê disso? Seria um boa prática, qual a vantagem disso?

@devjunioralves Жыл бұрын

Sim, é uma boa prática, tu cria um arquivo apenas para o custom hook, exporta ele, e utilizar onde for necessário. Deixa desacoplado, assim deixamos ele reutilizável. Valeu João!

@user-ox3bh6fv7r Жыл бұрын

muito bom mano

@devjunioralves Жыл бұрын

Valeu mano!!!

@JoaoLucas-qh8xd Жыл бұрын

Gostaria muito de saber a diferença entre utilizar um custom hook e um context, queria entender o impacto disso no desenvolvimento e quais vantagens e desvantagens.

@devjunioralves Жыл бұрын

Faaala João, excelente pergunta. Context API é para, principalmente, resolver o prop drilling, custom hooks são para compartilhar lógica. Não podemos comparar um com o outro, são ferramentas diferentes para propósitos diferentes.

@JoaoLucas-qh8xd Жыл бұрын

@@devjunioralves Show demais Júnior, eu dei uma pesquisada e estudei um pouco sobre e no trabalho já comecei a aplicar alguns custom hooks, ficou daora demais e também aprendi na prática que context e custom hooks são bem diferentes mesmo.

@matheusdeoliveira3303 Жыл бұрын

Na mesma linha da pergunta, vamos ter um exemplo de ecommerce As operações (somar valor, quantidade de produtos em um carrinho) seria o custom hook, e expor os itens do carrinho a outros componentes/páginas seria responsável pela context api?

@devjunioralves Жыл бұрын

@@JoaoLucas-qh8xd Toppp João! Perfeito cara, os custom hooks ajudando muito organizar melhor o código, testar e etc.

@devjunioralves Жыл бұрын

@@matheusdeoliveira3303 Exato Matheus, isso mesmo! Eu só adicionaria uma observação, poderia estudar a possibilidade de substituir a Context API por um state management (Zustand, Recoil, Redux...).

@xarop1692 Жыл бұрын

Se eu tivesse mais pages onde teria mais validações, seria possivel deixar esse custom hook useForm mais genérico ou teria que ter um custom hook "useForm" para cada page por conta do schema ser diferente?

@devjunioralves Жыл бұрын

Tem sim, geralmente eu crio um custom hook genérico, como um wrapper do useForm do RHF.

@ribastudio Жыл бұрын

@@devjunioralves seria bacana mostrar isso, pq tb é uma dúvida minha :D

@cristianmelo7729 Жыл бұрын

Não ficou claro pra mim a diferença entre criar um hook e colocar as funções dentro de uma contexto api. Entendo que a context é pra props drilling e tal, mas também serve para espalhar as funções entre componentes... Help Valeu Jr!!

@devjunioralves Жыл бұрын

Se tu só precisa compartilhar a lógica, utiliza os custom hooks. Utiliza a Context API apenas quando for de fato necessário Cristian.

@lucascoliveira3957 Жыл бұрын

Uma dúvida que me surgiu... Fazendo um custom hook de um componente que utiliza-se de hooks do react, como useRef e usa de custom hooks de libs como useQuery, esses hooks, vc mantem no componente ou vc coloca no custom hook? Pq a lógica utiliza algumas infos desses hooks, essas infos eu passo por parâmetro para o meu custom hook? No caso, quando um custom hook depende de outros custom hooks, principalmente daqueles que precisam ser chamados dentro do componente do react, como vc resolveria esse problema? Ieu pensei em passar todas as infos que o custom hook precisa, por parametro, mas não sei se isso está certo, pq algumas das coisas que o custom hook precisa são funções, tá correto isso?)

@jajaja123cds 19 күн бұрын

Que fonte é essa que voce usa man?

@devjunioralves 19 күн бұрын

Chama FiraCode man

@lucascoliveira3957 Жыл бұрын

Definir um custom hook com memo, é útil? export const useFetch = memo(function useFetch({ ...

@devjunioralves Жыл бұрын

Não Lucas, utilize o memo apenas quando de fato for necessário. A má utilização dele traz mais problemas de performance do que ajuda. Tem um vídeo onde falo desses recursos de memoization, confere lá, tu vai curtir.