Au 18 - Front-end - React - Finalizando e dicas de estudo - Mestres BEGIN

[Música] fala pessoal jancer aqui no vídeo a gente vai estar continuando aqui no desenvolvimento da aplicação né só que agora é mais um vou est passando aqui por alguns detalhes que a gente Deixou passar vou estar falando aqui também de daqueles erros que a gente tá tendo né explicando eles resolvendo eles tá pra gente entender melhor o contexto deles e eu eu vou est falando a gente vai estar finalizando também né a aplicação Já chegou no final ali on a gente tinha planejado tá do que fazer e eu vou deixar também alguns desafios aí recomendar

sugerir alguns tópicos de estudo e também formas de melhorar esse nosso código né porque tem muita forma aí que a gente pode estar fazendo para est conseguindo chegar aí na melhoria disso Beleza então vamos aqui no código já né sem perder muito tempo vamos aqui no Browser né no Browser se a gente atualiza ele tá dando dois erros né basicamente o primeiro erro ele tá falando de Chaves únicas né E tá falando aqui D prod table Beleza então se a gente vem aqui na componente product table vamos vir aqui cadê ela product table aqui né

Ele tá reclamando dessa chave e essa chave tá relacionada diretamente com os Maps que nós fazemos tá então sempre que a gente tá fazendo um map e retornando elementos n que elementos visuais que vão pra árvore lá da Dom esses elementos eles precisam ter uma chave única um identificador único e por que que isso tem que tem que ser único esse cara porque isso relaciona bastante com aquela ideia da virtual Dom e da Dom né de como o react compara essas coisas e decide se deve ou não recarregar uma componente tá e o que que

acontece eh falando melhor aqui eh O que a galera tem muita intuição de fazer é passar por exemplo a gente tá mapeando um Array né e um Array no map aqui ele tem um índice tá o índice de cada elemento que a gente tá mapeando então o que a galera costuma fazer muito é passar por exemplo igual no meu map eu estou retornando uma table Row né uma linha de dados aí da tabela galera tem muito gosta muito de fazer isso aqui ó ke igual index né A galera gosta muito de fazer né não pode

generalizar mas é um erro comum que a gente tem aí no desenvolvimento react que é passar esse índice E por que que isso é um problema porque o que o react faz na verdade né Para que que ele quer essa aqui é basicamente para decidir se é aquele mesmo item que ele tá analisando então por exemplo essa nossa lista aqui né que tem sei lá 10 uma lista que tem 10 linhas se cada item tem uma chave única quando o algoritmo de reconciliação passar por essa lista e verif ele vai verificar as chaves né comparar

com a virtual Dom com a Dom atual se as chaves são a a mesma ele não vai recarregar o elemento né renderizar ele de novo se a chave muda ele fala pô esse elemento é diferente né é meio com forma de identificar se o elemento é o mesmo ou não sem ter que entrar e analisar o conteúdo daquele elemento tá então essas K são usadas para isso e isso se resume a muito ao algoritmo de reconciliação né então se a gente pesquisa aqui reconciliation react né a gente vai cair aqui na documentação do próprio react

onde ele fala mais sobre isso eu recomendo muito que vocês de uma olhada nisso aqui mas a ideia é basicamente é essa onde vai ter essas Keys e essas que serão ou dirão pro iect quando ou não renderizar um elemento e se na nossa lista por exemplo os itens eh o índice se a gente usa o índice né o índice se o arrei muda ou se Um item muda de posição o índice vai mudar tipo o elemento vai ser diferente mas a chave vai ser a mesma né porque o índice é o mesmo tipo o

elemento que mudou de posição ele teve o índice mudado só que na árvore esses índices vão vão ser o mesmo sabe Então é um problema que vai causar de react ou ele vai renderizar sem precisar ou ele não vai renderizar aquele elemento tá e a gente meio que vai perdendo o controle e o react vai perdendo o controle do que é ou não mostrado em tela então o certo é a gente sempre tenha né no no no nossos dados né os dados que a gente tá fazendo o map a gente Procure sempre ter Chaves únicas

né ou identificadores únicos daqueles elementos tá e usar esse esses identificadores únicos no caso aqui de produto né produto tem um ID esse ID vem do banco de dados então a gente sabe que ele é único né que ele não vai se repetir então só passando aqui ó que é igual product.id no no elemento que eu retorno né Lembrando que eu passo aqui no elemento mais externo ou seja se eu retorno sei lá uma componente inteira com vários filhos eu só passo no pai mesmo aqui e aí tá ok né se a gente salvea isso

aqui e volta lá no Browser vamos atualizar aqui o erro já sumiu Tá e agora ele tá reclamando de outro erro aqui que é também relacionado à nossa tabela né que ele fala aqui né que o esse erro aqui já tá bem autoexplicativo né que ele fala que um table Roll não pode aparecer como filho de uma tabela da da tag table que a gente tem que usar a a tag tb e a tag th head ou t fut para e dizer ali pra Don dizer ali pro nosso paraa Nossa indicar dentro da tabela o

que que é cabeçalho o que que é corpo e o que é roda pé então aqui também é bem simples da gente resolver ou seja esse TR aqui onde tá esses ths é o head né é o cabeçalho da nossa tabela então vou passar aqui o t head a tag né o elemento t R então vou passar ele por volta aqui dessa T Row né esse data que eu tô mapeando aqui é o corpo né então vai ser o t Body Beleza vou colocar aqui embaixo tá aqui né E nesse caso essa tabela não tem

não tem roda pé né que seria o TF beleza bem simples mesmo salvar aqui limpar o terminal atualizar a página e a gente já sumiu com os nossos erros e apareceu ali um um detalhe o quando eu atualizo né ele ó se se eu vir aqui na nossa aba de Network aqui do Death Tools né colocar aqui a internet como um um Slow 3G onde é que tá isso aqui eu tenho que aumentar aqui né no throttling aqui né vou colocar internet lenta se a gente atualiza ele vai demorar a atualizar e ali vai ficar

nenhum produto Só que lá no nosso XD não tava nenhum produto né se a gente olha aqui no XD Cadê a gente tem isso aqui ó nós temos essa componente aqui inteira né ops não há nada aqui um texto um botão para o mesmo botão para adicionar novo produto né e uma imagem tá E que isso não isso era para ter sido feito lá no início mas a gente acabou passando ali despercebido e a gente meio que não criou essa componente tá então essa componente aqui eu vou deixar como desafio tá porque até essa aula

aqui ela é a última que a gente vai est fazendo aqui desse minicurso então eu vou deixar isso aqui como desafio tá para vocês criar essa componente e não só essa componente mas também a funcionalidade de ver os produtos excluídos tá porque se a gente vem aqui no nosso browser nós temos aqui um select né que mostra todos os produtos e produtos excluídos só que isso aqui seria só em tempo de execução sei lá se eu se eu apagar eh dois itens aqui da lista voltar aqui né se a gente apaga dois itens aqui e

eu armazenaria isso em um Array e exibiria quando eu Trocasse esse filtro aqui para produtos excluídos né num tabela nessa mesma estrutura Eu só iria filtrar né Por que que eu falo que é só em tempo de execução porque a gente não tem essa funcionalidade no banco de dados tá no banco de dados não foi feito um Point lá para armazenar os produtos excluídos até porque a gente iria precisar de ter um um controle de usuário Ou talvez não né mas enfim a gente não tem suporte na nossa api Então seria algo mais em tempo

de execução mesmo armazenar o que eu apaguei em uma rei e exibir quando a gente trocar esse filtro aqui tá E aí isso junto com a componente lá de de lista vazia eu vou deixar como desafio aqui pra nossa do nosso projeto né Para que vocês baseado no conteúdo que a gente trouxe aí de todas essas aulas crie esses essas funcionalidades Tá certo e só voltando aqui no no no no código né a a componente de lista vazia vai ficar aqui nesse H1 escrito nenhum produto tá nós estamos aqui no índex da nossa página de

produto certo E além disso O que que eu quero falar com vocês aqui essa questão que nós trabalhamos aqui de pensar nas propriedades como evento e tá sempre trabalhando com callback tá porque esse projeto ele é pequeno mas se a gente dar uma olhada aqui nós já temos muitas callbacks né muita linha de código muita coisa e tem forma de resolver isso né Tem forma de simplificar isso e muito tá porque é basicamente a ideia essa essa é a mesma ideia daquela do do prop drilling que é basicamente quando eu preciso de uma não é

a mesma ideia mas o problema é meio que o mesmo que eu preciso de um state em uma componente filha mas o state tá sendo criado no pai e eles estão distantes né questão de sei lá um componente filha da outra dentro da outra e sei lá isso vira uma escada né vira uma cascata ali então uma das soluções é a gente pegar aquela propriedade o dado que eu preciso e enviando via propriedade de pai para filho de passando filho filho filho até chegar onde eu preciso usar ou então a gente trabalha com callback que

foi a abordagem que a gente teve aqui que é um pouco mais correta que é o recomendado né a gente tá trabalhando com essas callbacks mas o problema é ter que ficar manipulando e fazendo essas artimanhas aí com callback e enfim o código a componente em se ela vai ficando muito grande né aqui a gente tem uma componente relativamente simples e ela já tá chegando aí nas suas 150 linhas de código né E então aí tem a gente tem que preocupar com isso porque esse projeto é pequeno esse projeto é sim simp e isso pode

escalar muito outro problema que tem aqui eu quero abordar para vocês é essa questão dos dados né do de buscar dados do backend porque o que que acontece sempre que eu tô editando Um item que eu tô apagando o item eu ao invés de eu editar a minha lista atual de dados eu simplesmente busco de novo do backend e já venho os dados atualizados e isso é um conceito bem interessante da gente abordar aqui também que é a questão do optimistic updates que é basicamente a gente pensar que a gente assumir que ã a operação

no backend vai dar certo porque na maioria das vezes dá e assumindo isso eu altero a minha lista local sem precisar eh buscar de fazer outra requisição e buscar novos dados os dados novamente do backend tá então é uma questão de otimização é interessante mas a gente tem que tomar cuidado porque às vezes começa a ficar difícil por exemplo na criação de um usuário ou sei lá na criação de um produto né Eh esse produto ele não tem quando eu quando eu tô aqui na aplicação que eu tô criando aqui preenchendo o formulário esse produto

ele não existe um ID um identificador E se eu for passar esse produto aqui nessa minha lista de produtos e eu clicar em editar e eu altero os dados quando eu mandar pro backend não existe ID né porque o ID vem do backend né então é meio que uma junção de front end com backend pra gente alinhar falar ó quando eu mandar a criação de um produto você retorna para mim o ID daquele produto para mim adicionar aqui no meu frontend no meu cliente para caso a gente manipule depois a gente já já tem aquele

ID ali mas enfim é muito é muito detalhe é muita coisa para se ajustar é muita regra de negócio tá mas eu quero apresentar aqui para vocês o conceito né se a gente pesquisar aqui por optimistic updates a gente já vai achar algumas coisas optim se eu pedi de react a gente começa a achar algumas coisas tá alguns artigos algumas coisas bem interessantes mas aqui eu vou é que eu vou juntar isso aqui com o problema anterior das callbacks né do prop drilling que é a questão dos controladores de estado né então nós teremos aqui

o react context que é a api Hum que a gente pode que é uma das que a gente tem en contato primeiro né que essa essa ideia de contexto É o quê É bas basicamente eu vou criar um objeto por volta da minha componente onde qualquer componente dentro daquela desse objeto dentro desse contexto ela tem acesso aos dados que estão ali né então o contexto ele serve para controlar esse estado e para armazenar dados Então se na minha componente P eu quero Sei lá eu criei um produto né eu pego esse produto e armazeno no

meu contexto certo e aí a minha componente filha que tá lá dentro sei lá a tabela listagem desses desses produtos ela não vai buscar da componente P dela ela já vai buscar direto no contexto que o contexto também é uma é uma componente Pie só que nós temos uma API específica para para trabalhar com isso né para buscar esses dados então a gente pode imaginar o contexto como um contêiner por fora normalmente o que que a galera faz ela coloca o contexto na raiz da aplicação tá se a gente vem aqui no código eles criam

um contexto aqui no app tsx na raiz de tudo ou seja Independente de onde eu tiver dentro do app eu vou conseguir acessar esse contexto esse objeto de dados né E aí a gente consegue começar a trabalhar eh começa a gente começa a criar os States ao invés de eu criar um state na tela eu começo a criar o state no meu contexto Ou seja eu levo essa lógica esse dado para lá e deixo ele acessível para toda a aplicação em qualquer ponto que que a aplicação precisar tá então nós temos o o context né

do do próprio react que é um app aí muito interessante é muito útil e nós temos também o segundo que eu diria mais famoso aí que é o Redux react Redux tá que dentro do react Redux a gente é basicamente um api nessa mesma ideia de aqui a gente fala chama de Store né que seria uma componente P que a gente usa uma API e o Redux em si ele tá se convertendo aqui no Redux eh tukit que é basicamente um api mais simples ainda do que o contexto tá é interessante usa as funções reduis

né o Hook e use reducer lembra bastante o Redux eh que é basicamente a gente ter essa ideia e esse tratamento fazer esse tratamento do nosso de eventos e esses eventos alteram objeto e esses objetos estão disponíveis para toda a aplicação controlando também o estado né então se eu altero um valor no Redux a componente que tá consumindo aquele dado vai ver essa alteração vai usar esse dado e vai indicar pro react falando ó tal tal valor alterou em tal um componente recarrega essa componente aí e ele recarrega e exibe em tela tá então Fica

muito simples o Esse controle fica muito interessante Eu recomendo muito que você dê uma estudada aí sobre reducer sobre Redux e sobre context também eh para que você entenda um pouco melhor de tudo isso aí e faça o uso durante ali que quando a gente tá codando porque é realmente muito útil e ajuda muito tá e uma outra coisa além disso é a questão no Redux toket nós temos o Redux toket query né rtk query aqui ó tá até na documentação mas nós temos também o react query react query e é basicamente são basicamente apis

que ajudam a gente a tratar aquela questão dos dados tá que eu falei antes que a gente tinha que ficar sempre buscando dados porque tanto o react query quanto o rux toet query eles criam objetos para armazenar os dados que a gente busca do backend E aí eles mesmos tem a api deles que controlam quando a gente vai buscar novos dados ou se eu vou buscar ou se eu vou fazer um optimistic update né setar ali um valor que eu preenchi um formulário e enfim é uma API junta com essa ideia de Store junta também

com a ideia da aplicação toda ter acesso e e renderizar né recarregar reexibir em tela esses dados Então são são apis aí que vão contribuir pra gente só que em questão relacionada a esses dados que vem do backend tá então toda vez que eu criar alguma coisa eu não vou precisar mais buscar toda da minha lista de dados do backend a gente pega aquele dado ali e insere nessa Store ou usando Redux to query ou usando o react query enfim vai depender aí do do seu use Case ou do que que você de qual tecnologia

que você tá usando né mas o fato é que isso vai simplificar bastante vai economizar as requisições do backend né vai ajudar a gente a ter um controle melhor um sistema mais otimizado juntando essas ferramentas aí né tanto essa questão da query quanto a questão da história né do contexto Beleza então para esse vídeo né para essa aula é isso tá eh eu espero que vocês tenham curtido do curtido aí o curso né Qualquer dúvida qualquer comentário pode deixar aí embaixo que vai ser um prazer est vendo aí o comentário a interação de vocês e

essa é a última aula aí desse nosso mini curso que foi um curso bem longo né não foi mini Não foi bem longo mas eu acredito que eu consegui contribuir bastante aí para todo o conhecimento de vocês tá então novamente e não finalizando aqui né para essa aula é isso espero que eu tenha ajudado qualquer dúvida pode deixar um comentário logo abaixo e é isso aí muito obrigado e até a próxima [Música]