POR QUÊ VOCE NÃO DEVERIA UTILIZAR O TERNÁRIO NO REACT?

[Música] Fala galera beleza e o Alves aqui bom no vídeo de hoje eu quero trazer algumas explicações aqui alguns conceitos importantes aqui no viet quanto as condicionais né utiliza bastante condicionais no nosso dia a dia se você já estuda react por algum tempo ou já trabalho com react Com certeza você já teve que lidar com informações né são que dependem de condicionais ali para ser exibida para o usuário ou não né e eu queria trazer um pouco de explicação sobre utilização do ternário né dentro do jsx Porque que a gente deveria evitar o trenário dentro

do jsx e como que a gente poderia fazer de alternativa né a utilização do terrário com and ou com ór por exemplo é eu quero trazer também uma dica de ouro aqui mais para o final do vídeo aqui que com certeza vai ajudar bastante gente e uma dica bônus né de um componente customizado aqui que a gente pode fazer para a gente lidar com com verificações certo então bora lá bom antes de mais nada né O que que seria esse terrário né para quem não não tá ligando o nome ao item aqui né basicamente é

um if com elsea Então se a gente tem um eixo e um Elcio assim isso aqui seria um terrário qual que seria a forma resumida disso aqui para a gente utilizar dentro do jcx né Lembrando que a gente não consegue ter um if alça aqui dentro do Hitler né então aqui a gente deveria fazer era ter uma condição aí dada a condição eu vou fazer tal coisa e se essa condição for falsa eu vou fazer outra coisa certo aqui seria a condição [Música] Então seria isso né O Infiel se escrito de uma forma terrária aqui

né beleza então a utilização aqui seria bem simples né imagina que a gente tem um exemplo aqui que você só vai exibir tal coisa para o usuário que é de mim e para o restante dos usuários que não são admins vai exibir um outro componente uma outra tela né então vou colocar por exemplo aqui um admin como true e vou fazer uma verificação aqui né se o admin ele for tu faz tal coisa senão ele faz outra coisa se ele for tru eu quero exibir aqui um H2 [Música] e a de mim senão eu quero

exibir um outro H2 mas ele não é de mim certo então tá true ele admin tá falso ele não é de mim certo funcionou show de bola beleza tá um outro exemplo agora seria a gente tem por exemplo um componente customizado aqui de e vai apenas retornar um input do HTML aqui simples e eu vou colocar que ele pode receber um playce holer por exemplo mas aqui Imagine que ele pode receber todas as propriedades que o elemento input do HTML pode receber tá só para simplificar que eu vou deixar só o preço Holder que ele

vai ser do tipo é um string né então é aqui ele recebe o Play Store Beleza [Música] então vou tirar isso daqui [Música] então aqui eu vou fazer o seguinte vou colocar uma condição aqui né César condição ela for verdadeira eu vou exibir meu input um Place holder condição um se não colocar [Música] e para esse Rode dois explica mais fácil beleza então é verdadeira eu exibido esse pedaço se a minha condição for falsa eu vou exibir o please 2 certo tá Qual que é o problema disso daqui o problema é o seguinte quando a

gente tem algum tipo de verificação dentro do jsx com um ternário o que que o react ele tá fazendo como aqui nas duas condições é o mesmo componente perceba que é o mesmo componente é o input a única coisa que tá alterando aqui é a propriedade por esse holder certo então o que que acontece aqui por baixo dos planos o react ele vai verificar por exemplo na primeira vez que isso aqui rodar que o componente foi indenizado em tela suponhamos que essa condição ela seja verdadeira então ele vai exibir vai montar o elemento cumpre esse

router um que é o que tá aqui por algum motivo na próxima renderização algum estado Mudou alguma coisa dessa dessa condição mudou e agora ela seja falsa e aí a gente espera que o que o yek ele vai desmontar o componente com esse Roller 1 e montar um input com esse roder 2 certo porém não excluir que vai fazer como são o mesmo componente ele vai alterar ele vai manter o componente e vai alterar apenas a propriedade para esse rolda certo e dependendo do caso dependendo da situação isso vai gerar um problema que a gente

não tá esperando vai devolver um resultado que a gente não espera certo porque o que que a gente quer Quando faz uma verificação desse tipo é que toda vez que essa condição mudar eu desmonte esse componente e monte o novo do zero certo porque isso aqui é muito rápido né não tem tem que ficar falando com questão de performance aqui nesse caso porque essa parte de montar e desmontar um componente da mais nesse caso que é um input apenas é muito simples né e evita né alguns problemas porque eu não quero que seja o mesmo

componente eu quero que ele monte um novo Então como que a gente fala isso daqui né como é que a gente consertar isso daqui geraria o resultado correto né porque o resultado visual aqui será o mesmo mas por baixo dos planos e dependendo do meu componente visual aqui talvez não seja o que eu tô esperando então para evitar esse tipo de problema dá para a gente fazer o seguinte eu faço a condição Então se minha condição ela for verdadeira eu utilizo o end né o operador lógico end que é os dois é comerciais aqui no

JavaScript e eu renderizo meu input com [Música] e se não se a condição for falsa eu quero que ele renderiza o meu componente para esse rodei dois Então veja que nada mudou agora se eu mudar isso aqui para falso ele vai renderizar o blazer 2 e não então perceba sempre agora sempre que essa condição alterar ele vai desmontar o que não satisfaz aquela aquela condição e vai montar o componente novo com base na Nova Condição certo o resultado aqui da condição eu quero destacar aqui três pontos né são bem importantes quando a gente vai utilizar

alternar é mas antes disso eu quero deixar claro não é proibido rotilização de ternário tá eu não tô falando que quer proibido é só que quando a gente for utilizar terrário a gente tem que ter em mente esses três tópicos que eu vou falar agora o primeiro é esse problema de montar e desmontar o componente aqui no react certo tem que lembrar desse detalhe se tiver causando algum problema provavelmente deve ser o treinar então a gente poderia substituir dessa forma o segundo problema é que quando você for utilizar o terrário segundo problema não né segundo

a segunda observação é quando a gente for utilizar alternario deixar claro a condição né a condição do terrário que ela que é importante né então eu vou ter a condição aqui e aí tal coisa e se não outra coisa então Deixar claro o mais simples possível essa condição aqui né porque ela é a partir dela que eu vou gerar renderizar algo ou então outro um componente até um outro né então deixar claro isso essa condição aí e o terceiro né terceira observação aqui bastante importante vai ficar mais importante de todos é que importas e nenhuma

utilizar mais de duas brands por ter na área o que que seria isso a gente tem aqui por exemplo uma condição eu vou até colocar aqui a condição e condição dois eu vou criar um outro variável aqui [Música] vou fazer o seguinte criar aqui minha condição certo e aí eu vou exibir aqui por exemplo um [Música] e aqui eu vou ter um outro terrário aqui dentro que vai ser com a condição 2 Então se condição 2 [Música] e descer isso daqui seria condição 3 aqui no caso né seria um Infiel e aqui seria um IFES

e depois um Elson Perceba como os dois são falsos tanto um quanto dois ele vai exibir o três se o um for verdadeiro ele vai exibir a condição um se o dois verdadeiro vai ser dois por isso sim por diante se um aqui for falso [Música] e o 2 o true ele vai exibir o dois né e assim por diante eu vou apagar esse Qual que é o problema disso daqui né acho que tá claro né a legibilidade do código né tá bem mais complexo é assim é uma condição simples aqui a gente não tá

acertando na mão aqui também naderal ou falso mas olha como é complexo de ler isso daqui né então Não façam isso né evitem isso daqui ao máximo evitem não não utilizam de forma nenhuma é mais de duas brands aqui né então eu tenho uma brente aí dentro da segunda brente eu tenho mais duas brands então é complicado né [Música] beleza isso seria os três tópicos importantes aqui na utilização de um ternário né dentro do jsx uma alternativa como eu mostrei seria a gente utilizar o Andy né para poder renderizar que seria bem fica bem mais

legível né então Lembrando aqui que eu tinha mostrado aqui com ele fica bem mais fácil da gente entender né [Música] de preguiça de fazer logo né fica mais fácil [Música] Então se fosse tal coisa eu diria meu input aqui né como eu mostrei ou senão eu exibiria meu outro input aqui né negando a condição e tal fica bem mais simples aqui de ler então bateu o olho aqui Você entende queria falar agora um pouco sobre o operador Lógico que ele tem um detalhezinho importante também Bora lá primeiro que eu vou criar uma condição uma condição

do renova [Música] eu vou apagar esse pote aqui eu vou utilizar por enquanto e vou fazer o seguinte Então se minha conta se for assim minha condição um ou minha condição 2 forem verdadeiros ali né qualquer uma delas eu quero exibir o meu sei lá um H1 H2 aqui vai [Música] mostrando então perceba que o meu s20 fez um detalhezinho aqui olha chamar atenção aqui ó deixa eu voltar olha como que eu escrevi e Olha quando eu salvei o que aconteceu perceba que a condição um ou condição 2 e então tal coisa né olha o

que aconteceu como eu não deixei explícito qual era a minha condição O que que eu tava verificando no ou o que que o s20 fez ele agrupou a minha condição dois com o H2 aqui né então o que acontece eu só vou exibir agora o condição o meu H2 se minha condição dois ela for tru certo só que não era bem assim que eu queria né Lembrando que eu escrevi dessa forma Então qual que é o detalhe que eu quero chamar atenção aqui para a gente ter sempre cuidado com utilizar o operador orner ou ou

aqui no jcx deixa explícito com parêntese O que que você tá verificando então agora ficou mais claro então por exemplo se o meu um que for verdadeira vai exibir for verdadeira vai exibir se os dois forem verdadeiros exibe e se os dois forem falsos aí não exibe então só vai exibir se um dos dois ou os dois né forem true certo então esse é o detalhe sempre que utilizar um or aqui dentro do jsx deixa explícito Qual que é a condição que você tá verificando com or entre parênteses certo isso é bastante importante evita muito

problema né a dica de ouro agora né chega mais para o final do vídeo aqui a dica de ouro é o seguinte alguns tipos de verificações que a gente tem aqui dentro do Java script né a gente pode estar utilizando a nosso favor deixa eu apagar isso daqui que é o seguinte quando a gente tiver dependendo de uma string por exemplo imagina que eu tenho aqui [Música] username [Música] tem mas tem que vazia aqui né se essa Mestrinho por exemplo imagina que isso aqui vem HPI alguma coisa assim né então de inicialmente Isso aqui vai

ser um estado inicialmente ela tá vazia depois de um né da requisição retornar eu pego e atualiza esse estado aí com o nome do usuário Beleza então o que que eu falei aqui Eu falei ah José e tal se ele for se ele existir eu vou Ah tá tem que colocar um fragmento aqui para o outro [Música] eu vou exibir né se usa mesmo aqui [Música] vai dar um probleminha [Música] sempre sempre que a gente for utilizar fazer alguma verificação aqui dentro do jsx com string transforma embuleando como ou assim se táxi mais simples né

ou pode colocar um bullying dessa forma ao mesmo resultado Mas eu prefiro assim fica mais simples né Então Eu transformo isso daqui no booleane se isso aqui for verdade tem que vazia vai retornar falso certo me retornou falso então não vou exibir só vou exibir isso aqui quando quando tiver menos um caractero aqui exibir um caráter se ele não tiver nada não exibir nada certo isso aqui evita bastante erro né na renderização de componentes aqui dentro do jcx outro detalhe A rei como que a gente verifica Reis né eu vou ter aqui meio vamos supor

que ele seja vazio aqui que eu faria aqui se meu arreio [Música] não faça dessa forma isso aqui não vai ser [Música] não vai ser interessante né que a gente pode fazer aqui por exemplo aqui pode gerar erro provavelmente vai gerar erro né com certeza então o que que a gente pode fazer aqui para melhorar duas formas Ou você usa o Construtora aqui né do Arreio aqui no Java Script isso aí aí eu passo meu arreio aqui ó então se ele de fato vão abrir o exibido tal coisa tá reclamando aqui porque é do tipo

N né se não eu posso fazer o seguinte também né Posso pegar o básico aqui é pegar ponto lento for maior que zero aí eu executar uma coisa né nesse caso ele não vai exibir porque porque meu rei tá vazio se colocar um aqui por exemplo o lance já é maior que zero então ele já verifica né outro tipo de dado aqui importante que a gente precisa fazer verificação objetos então é claro que mais o BJ objeto vazio mesmo esquema que que a gente pode fazer aqui para evitar a renderizações erradas aqui né exibir informações

erradas aqui para o nosso usuário quando se trata de objeto eu posso utilizar também construtora que o objects [Música] e posso o mais isso aqui o ponto lenço disso aqui né tem que ser maior que zero é objeto vai exigir alguma coisa não né Por quê Porque tá vazio Então esse aqui vai me retornar 0 é maior que zero não não é então não vai exibir se eu tiver algum elemento aqui dentro nem me [Música] aí ele vai exibir lá certo ou por exemplo eu posso fazer o seguinte transforma o tirar isso daqui [Música] e

dou um ponto name para verificar se aquela informação que eles vê por exemplo imagina que eu quero exibir o nome aqui não do objeto então ele só vai exibir né quando ele tiver aquela informação se não tiver nada aqui não exibe receba o meu objeto ele não tá vazio ele tem uma propriedade name aqui tá mais a propriedade name em si ela é uma string vazia então eu já evito aqui como é que eu vou exibir vazio lá para o usuário não faz sentido né então eu nem exibido esse P esse P nem existe lá

no na minha Dom ali certo e por último mais ou menos importante funções né uns dois meses [Música] Claro do jeito padrão mesmo [Música] celular alguma coisa e aí como é que eu faço a verificação aqui seguinte forma [Música] eu vou fazer um taipoff my function [Música] mas tem que ser igual a adivinha funcha né então se ela for uma função de fato dali ela chama ela aqui na deu um retorno alguma coisa sei lá se não ela nem Esperasse aqui esse trecho nem vai ser exibido né então enquanto a minha função ela não for

de fato uma função se algo sei lá em algum momento da aplicação aqui der um erro crachá então eu já asseguro esses detalhes que podem acontecer durante a aplicação né Beleza cobramos Nossa dica bônus aí Espero que isso aqui tenha sido muito vai ser esse aqui provavelmente vai ser muito útil Eu lembro quando eu me seguir a primeira vez aqui me ajudou bastante então utilizou bastante esses conceitos aqui hoje em dia no meu dia mesmo como deve aqui atualmente no trabalho como frontinha de Sênior aqui na luz do Magazine Luiza e por último né Eu

quero deixar claro aqui também [Música] componente Extra que a gente pode criar aqui que essa dica bônus que seria essa dica bônus aí eu tenho um componente dessa forma aqui eu tenho um render with né então esse renderify aqui ele vai receber uma propriedade na verdade duas propriedades que uma condicional e a outra o elemento que eu quero exibir com base naquela condicional né então eu posso fazer o seguinte se aquela condição ela for verdadeira alguma coisa ou então quando ela não for verdadeira eu exgo um esqueleto um loading por exemplo ou eu posso deixar

isso aqui mais simples eu posso fazer o seguinte e vim para cá não vou usar esqueletone nem nada disso aqui então você é verdadeira eu puxo dessa forma né então eu posso fazer o seguinte eu vou limpar isso daqui vou limpar o meu retorno e [Música] condição vou colocar como e aqui eu exibir um aquele Reserva um condicional Escondidinho vou passar minha condição aqui vai acontecer ele vai exibir o meu componente [Música] Ah tá eu vou só colocar uma dívida [Música] ficar mais simples [Música] então enquanto a minha condição ela for verdadeira né esse componente

aqui ele vai vai entrar aqui vai verificar se a condição se for verdadeira aquela condição ele exibe aquele componente que é o filho se não ele vai exibir nada né então por exemplo se eu mudar aqui para falso ele não vai me exibir nada não vou ter esse dom aqui não vou ter esse elemento P aqui na minha Dom lá no HTML certo então bom galera por hoje é isso espero que vocês tenham gostado do vídeo né Se gostou se inscreve no canal deixe seu like Compartilha aí se você puder comente O que que você

achou dessas dicas aí se te ajudou de alguma forma ou se você tem uma outra opinião sobre a utilização do terrário e as outras condicionais aí com índio War é esse vídeo ficou um pouco mais longo do que o comum aqui no meu canal mas espero ter ajudado vocês aí com essas explicações Beleza então valeu pessoal falou e até a próxima [Música]