Conteúdo de qualidade que ajuda muito quem está começando. Porém a única abordagem avançada no vídeo é o useRef. Digo de forma prática! Esses conceitos são importantíssimos mas se tratam de conceitos básicos e intermediários. Sugestões de conceitos avançados são: • Hooks Avançados: useContext, useReduce, useCallback, useMemo, useRef e useCustom (Hooks Personalizados) • Renderização condicional: '&&', 'II' e Ternário (ex.: você tem um estado isLoading que verifica e atualiza o estado após uma promises retornar data ou error, então você tem o exemplo: 1 (validando true): return isLoading && Carregando.. 2 (validando false): return !isLoading && Bem Vindo! 3 (condicional ternário): return isLoading ? Carregando.. : Bem Vindo! 4 (condicional ou um ou outro): return !data?.name || error Não Foi Possível Carregar! 5 (usando todos): return isLoading ? Carregando.. : (!data?.name || error ? Não Foi Possível Carregar! : (data?.name && age >= 18 ? Bem Vindo! {name} : Espere Completar 18 Mané!) • Padrões de Design: Render Props, Componentes de Orquestração, Componentes de Alta Ordem (HOCs) e Hooks Customizados para reutilização de lógica em diferentes componentes. • Otimização de Performance: React.Memo (não é a mesma coisa que useMemo, uma vez. que useMemo é para funções de alto custo computacional e o Reac.Memo se utiliza para componets que raramente altera seu valor, sendo uma função de ordem superior (HOC).) • Gerenciamento de Estado Avançado: Redux, MobX, ou Context API para técnicas avançadas de normalização de estado, lazy loading de reducers, e uso de middlewares para lógica assíncrona. • Testes Avançados: Ferramentas como Jest e Enzyme, para se escrever testes para componentes React, incluindo testes de unidade, testes de integração, e testes de componentes com estado e efeitos. • Integração com APIs Assíncronas: Axios para busca de terceiro com async/await e promises (eu aconselho usar React useQuery para manipular e cachear as respostas e o axios para aproveitar os interceptors e os transformrequests, onde você irá passar por dentro do useQuery a funçao que irá requisitar o axios). Se lembrarem de mais algum conceito avançado coloquem aqui a baixo.
Excelente comentário Kaio, sensacional! E fico super feliz em dizer que na playlist de React aqui do canal, tem vídeos sobre todos esses temas. Inclusive, tem uma playlist focada em testes no frontend, que mostro desde configuração, até testes práticos e inclusive de custom hooks async. E ainda temos uma playlist focada em Design Patterns e outra focada em arquitetura de software!
Vídeo massa, e acho que minhas férias de código do começo do ano pra cá já demorou mais que o necessário. Esse ano essa vaga sai, retomar a jornada vendo vídeo do Dev Jr que não é Jr kkkkkkkk
Opa, valeu demais!!! Sobre os testes, já tem muitos vídeos sobre testes aqui no canal, da uma olhada que você vai achar muito conteúdo já, te componentes, hooks, funções async e etc. =D
Muito interessante os pontos levantados são questões muito importantes para performances da página r assim evitar renderizações e requisições desnecessárias. Fiz um app uma vez aue tinha muito problema disso
Eu construi um sistema relativamente grande com controlled components para formulários. Hoje será difícil reparar esse erro.. Tem formulários que travam muiiito!
Mano depois trás um video de concorencia e paralelismo no front usando react. Eu to ligado q a gente quase n usando no trampo mais cara achei maneiro pacas quando usei paralelismo para processar uns dados/filtragem em uma enorme quantidade de itens.
@@devjunioralves cara to numas comunidade q vo te falar viu to estudando go fui entrar na call pra tirar umas duvidas e os nego nem me responderam soooo sad
Nessa última parte sobre se o state é sincrono ou assincrono, esses dias tive um problema ao fazer um submit, no submit eu ia buscar no banco de dados o número do ultimo pedido feito, somar + 1, colocar isso no estado com ...prevState + o novo valor, para aí subir o novo pedido, mas nunca atualizava, até coloquei um setTimeout dentro do submit pra ver se adiantava, coloquei await no setForm, e nada adiantou quebrei a cabeça vários dias com isso e acabei tendo que criar uma nova variável dentro do submit para corrigir isso. O código ficou muito grande e sujo, se alguem tiver uma dica de como posso deixar mais clean eu agradeço.
E para você, o que um Dev React deveria saber?! Deixa aqui nos comentários 👇 Livros para dar o próximo passo como dev: 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
Muito bom, vou seguir essa trilha. 4 anos no mundo da programação e só agora dei uma chance para algoritmos e estruturas de dados. Estou lendo o "Algoritmos e estruturas de dados da @Loiane Groner agora, depois leio os outros.
@@franciscofetapi8741 Esse livro é muito bom! Algoritmos é a base de tudo que criamos e utilizamos no dia-a-dia, entende-los vai te levar à outro patamar na sua carreira Francisco!
@@devjunioralves 4 anos programando com javascript e só aprendi a ordenar uma lista por conta própria (sem usar o Array.prototype.sort) há bem pouco tempo. Além disso pelo que estou percebendo aprender sobre algoritmos ajuda a pensar em soluções que consomem o mínimo de processamento e memória da maquina. Ao criar uma função sempre estou pensando no tempo de complexidade...rsrsrs
@@franciscofetapi8741 Sensacional! Exatamente, no início, o foco é fazer funcionar kkk depois que vamos começar a pensar "qual a melhor forma de fazer isso?". Acho isso muito massa, o tempo vai passando e a gente vai evoluindo demais! Algoritmos é um assunto crucial para todo dev, só que vai te "fazer falta" mas pra frente na carreira.
![[AVANÇADO] TUDO QUE VOCÊ PRECISA SABER SOBRE ESTADOS NO REACTJS - O guia definitivo](http://i.ytimg.com/vi/xiQ5TFX7NiI/mqdefault.jpg)
Um dev Junior que é senior. kkk Video top!
Conteúdo de qualidade que ajuda muito quem está começando. Porém a única abordagem avançada no vídeo é o useRef. Digo de forma prática!
Esses conceitos são importantíssimos mas se tratam de conceitos básicos e intermediários. Sugestões de conceitos avançados são:
• Hooks Avançados: useContext, useReduce, useCallback, useMemo, useRef e useCustom (Hooks Personalizados)
• Renderização condicional: '&&', 'II' e Ternário (ex.: você tem um estado isLoading que verifica e atualiza o estado após uma promises retornar data ou error, então você tem o exemplo:
1 (validando true): return isLoading && Carregando..
2 (validando false): return !isLoading && Bem Vindo!
3 (condicional ternário): return isLoading ? Carregando.. : Bem Vindo!
4 (condicional ou um ou outro): return !data?.name || error Não Foi Possível Carregar!
5 (usando todos): return isLoading ? Carregando.. : (!data?.name || error ? Não Foi Possível Carregar! : (data?.name && age >= 18 ? Bem Vindo! {name} : Espere Completar 18 Mané!)
• Padrões de Design: Render Props, Componentes de Orquestração, Componentes de Alta Ordem (HOCs) e Hooks Customizados para reutilização de lógica em diferentes componentes.
• Otimização de Performance: React.Memo (não é a mesma coisa que useMemo, uma vez. que useMemo é para funções de alto custo computacional e o Reac.Memo se utiliza para componets que raramente altera seu valor, sendo uma função de ordem superior (HOC).)
• Gerenciamento de Estado Avançado: Redux, MobX, ou Context API para técnicas avançadas de normalização de estado, lazy loading de reducers, e uso de middlewares para lógica assíncrona.
• Testes Avançados: Ferramentas como Jest e Enzyme, para se escrever testes para componentes React, incluindo testes de unidade, testes de integração, e testes de componentes com estado e efeitos.
• Integração com APIs Assíncronas: Axios para busca de terceiro com async/await e promises (eu aconselho usar React useQuery para manipular e cachear as respostas e o axios para aproveitar os interceptors e os transformrequests, onde você irá passar por dentro do useQuery a funçao que irá requisitar o axios).
Se lembrarem de mais algum conceito avançado coloquem aqui a baixo.
Excelente comentário Kaio, sensacional!
E fico super feliz em dizer que na playlist de React aqui do canal, tem vídeos sobre todos esses temas.
Inclusive, tem uma playlist focada em testes no frontend, que mostro desde configuração, até testes práticos e inclusive de custom hooks async.
E ainda temos uma playlist focada em Design Patterns e outra focada em arquitetura de software!
@@devjunioralves top mano! Sua didática é impecável!
E a respeito de objetos recomendo darem uma olhada no material do garbage collection do v8
Excelente dica Icaro!
Vídeo massa, e acho que minhas férias de código do começo do ano pra cá já demorou mais que o necessário. Esse ano essa vaga sai, retomar a jornada vendo vídeo do Dev Jr que não é Jr kkkkkkkk
Kkkkkkkk Boa!
Com certeza, estudando e fazendo networking, vai sair sim!
Eu acho que o nome dele é Junior Alves.. kkkkk, daí "Dev" + "Junior Aves"
melhores vídeos são esses d dicas mais avançadas e performance, mt bommm juniorr
Valeu demais Rafa!!!
Esse canal é brabo demais! Pode trazer vídeo de testes automatizados no React? Adoraria entender sobre como funciona no front
Opa, valeu demais!!!
Sobre os testes, já tem muitos vídeos sobre testes aqui no canal, da uma olhada que você vai achar muito conteúdo já, te componentes, hooks, funções async e etc. =D
seu canal ta muito bom mano! valeu demais
Opa, muito obrigado!!!
Muito interessante os pontos levantados são questões muito importantes para performances da página r assim evitar renderizações e requisições desnecessárias. Fiz um app uma vez aue tinha muito problema disso
Sim, tu viu isso na pratica, o que na minha opinião, é a melhor forma de aprender de fato!
Eu construi um sistema relativamente grande com controlled components para formulários. Hoje será difícil reparar esse erro.. Tem formulários que travam muiiito!
Tem sempre conceitos novos que me fazem perceber que não sei React tanto quanto penso!
Enquanto estivermos estudando, sempre vamos aprender algo novo. Acho que isso que é sensacional, não tem como estagnar.
Mano depois trás um video de concorencia e paralelismo no front usando react. Eu to ligado q a gente quase n usando no trampo mais cara achei maneiro pacas quando usei paralelismo para processar uns dados/filtragem em uma enorme quantidade de itens.
O mano, com certeza, é sensacional mesmo!
@@devjunioralves kkkkkkkkkk sei q ta saco cheio disso mas e o disc?
@@devjunioralves cara to numas comunidade q vo te falar viu to estudando go fui entrar na call pra tirar umas duvidas e os nego nem me responderam soooo sad
@@icarovieira4479 Ja temo um canal na man! O link ta na descrição do vídeo.
@@devjunioralves achei não man
Nessa última parte sobre se o state é sincrono ou assincrono, esses dias tive um problema ao fazer um submit, no submit eu ia buscar no banco de dados o número do ultimo pedido feito, somar + 1, colocar isso no estado com ...prevState + o novo valor, para aí subir o novo pedido, mas nunca atualizava, até coloquei um setTimeout dentro do submit pra ver se adiantava, coloquei await no setForm, e nada adiantou quebrei a cabeça vários dias com isso e acabei tendo que criar uma nova variável dentro do submit para corrigir isso. O código ficou muito grande e sujo, se alguem tiver uma dica de como posso deixar mais clean eu agradeço.
Excelente feedback Laylson, tu poderia postar lá no Discord, ficaria mais facil pra gente te ajudar. Fico no aguardo.
E para você, o que um Dev React deveria saber?! Deixa aqui nos comentários 👇
Livros para dar o próximo passo como dev:
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
Muito bom, vou seguir essa trilha. 4 anos no mundo da programação e só agora dei uma chance para algoritmos e estruturas de dados. Estou lendo o "Algoritmos e estruturas de dados da @Loiane Groner agora, depois leio os outros.
@@franciscofetapi8741 Esse livro é muito bom! Algoritmos é a base de tudo que criamos e utilizamos no dia-a-dia, entende-los vai te levar à outro patamar na sua carreira Francisco!
@@devjunioralves 4 anos programando com javascript e só aprendi a ordenar uma lista por conta própria (sem usar o Array.prototype.sort) há bem pouco tempo. Além disso pelo que estou percebendo aprender sobre algoritmos ajuda a pensar em soluções que consomem o mínimo de processamento e memória da maquina. Ao criar uma função sempre estou pensando no tempo de complexidade...rsrsrs
@@franciscofetapi8741 Sensacional! Exatamente, no início, o foco é fazer funcionar kkk depois que vamos começar a pensar "qual a melhor forma de fazer isso?".
Acho isso muito massa, o tempo vai passando e a gente vai evoluindo demais!
Algoritmos é um assunto crucial para todo dev, só que vai te "fazer falta" mas pra frente na carreira.
Acho que os 6 primeiros são mais focados para a área!