Como utilizar switch em componente do React JS

Neste artigo você aprenderá a como utilizar switch em componente do React JS, uma instrução condicional muito poderosa

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Os componentes no React JS são conhecidos pela sua reatividade e flexibilidade. Uma das maneiras de explorar essa flexibilidade é através de estruturas condicionais.

No contexto da programação, a estrutura switch é uma das mais comuns para lidar com múltiplas condições.

Neste artigo, exploraremos como utilizar o switch para renderização condicional em componentes do React.

Entendendo a Necessidade do Switch

Às vezes, em nossas aplicações, encontramos cenários em que diferentes visualizações ou componentes precisam ser exibidos com base em algum estado ou propriedade.

Usar múltiplas estruturas if-else pode tornar o código desordenado e difícil de ler.

É aqui que o switch entra como uma alternativa limpa e organizada.

O que é o Switch Condicional?

No JavaScript, o switch é uma estrutura que compara uma expressão com múltiplos valores possíveis e executa blocos de código correspondentes a esses valores.

Ele é especialmente útil quando você tem várias condições para verificar.

Implementando o Switch no React

Vamos criar um componente simples que renderiza diferentes mensagens com base no dia da semana.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 118 aulas
• 4 projetos
• 9h 33min

Conhecer formação

1. Estruturando o Componente

Primeiro, defina o componente e o estado que armazenará o dia atual:

import React, { useState } from 'react';

function MensagemDoDia() {
  const [dia, setDia] = useState(new Date().getDay());
  
  // ...
}

2. Implementando o Switch Condicional

Dentro do componente, vamos usar o switch para renderizar uma mensagem diferente para cada dia:

let mensagem;
switch(dia) {
  case 0:
    mensagem = "Hoje é Domingo!";
    break;
  case 1:
    mensagem = "Hoje é Segunda-feira. Início de uma nova semana!";
    break;
  case 2:
    mensagem = "É Terça-feira!";
    break;
  // ... outros casos para os restantes dos dias da semana
  default:
    mensagem = "Dia não reconhecido!";
}

return <div>{mensagem}</div>;

Vantagens de Usar o Switch no React

Clareza e Legibilidade

Ao usar o switch, o código se torna mais claro e legível. Em vez de ter vários blocos if-else, temos um único bloco switch que lista todas as condições.

Escalabilidade

Se tivermos que adicionar mais condições no futuro, simplesmente adicionamos mais casos ao switch. Não há necessidade de reestruturar ou reescrever várias linhas de código.

Cuidados ao Usar o Switch no React

Evite a Complexidade

Mesmo que o switch seja uma ferramenta poderosa, é essencial evitar torná-lo muito complexo. Se você perceber que está lidando com muitos casos e a lógica está se tornando muito complicada, pode ser hora de pensar em refatorar ou dividir seu componente.

Sempre Use o default

O caso default atua como uma rede de segurança. Certifique-se de sempre ter uma condição default para lidar com situações inesperadas.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Chegamos ao fim do artigo que ensina a como utilizar switch em componente do React JS!

O switch é uma excelente ferramenta para lidar com renderização condicional em componentes React.

Ele oferece uma maneira limpa e organizada de gerenciar múltiplas condições, tornando o código mais legível e fácil de manter.

Ao adotar essa abordagem, os desenvolvedores podem construir interfaces mais flexíveis e responsivas, garantindo que o usuário sempre receba o conteúdo apropriado.

Seja criativo, explore as possibilidades e veja como o switch pode otimizar seus componentes React.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.

Dá pra usar switch dentro do return do componente?

Não direto, e o motivo é simples: dentro do JSX você só coloca EXPRESSÃO, algo que devolve um valor

e o switch é uma instrução, ele não devolve nada sozinho

Por isso o exemplo acima calcula a mensagem ANTES do return, aí o JSX só recebe o resultado pronto

Se você quer o switch mais coladinho no JSX, tem duas saídas honestas

A primeira é extrair pra uma função e chamar ela no meio das chaves:

function renderMensagem(dia) {
switch (dia) {
case 0:
return 'Hoje é Domingo!'
case 6:
return 'Sextou não, é Sábado!'
default:
return 'Dia de semana, bora codar'
}
}

return <div>{renderMensagem(dia)}</div>

Repara numa coisa: aqui nem precisa de break, o return já corta a execução do switch

A segunda é a função autoexecutável (IIFE) direto no JSX:

return (
<div>
{(() => {
switch (dia) {
case 0:
return 'Hoje é Domingo!'
default:
return 'Bora codar'
}
})()}
</div>
)

Funciona, mas é bem mais chato de ler

Na dúvida fica com a função separada, seu eu do futuro agradece 🙂

Switch para escolher qual COMPONENTE renderizar:

Esse é o uso que mais aparece no dia a dia, e quase nunca é com dia da semana

É com estado de tela: carregando, deu erro, deu certo, veio vazio

Em vez de devolver texto, cada case devolve um componente:

function Painel({ status, dados }) {
switch (status) {
case 'carregando':
return <Carregando />
case 'erro':
return <MensagemDeErro />
case 'sucesso':
return <Lista itens={dados} />
default:
return null
}
}

Se você já escreveu aquele if-else encadeado pra controlar tela de carregamento, é a mesma ideia, só que sem a escadinha de indentação

E olha o default devolvendo null: em React isso significa "não renderiza nada"

É uma saída limpa pro estado que você não previu, em vez de quebrar a tela do usuário

Switch, if-else, ternário ou objeto de mapeamento?

Cada um tem a sua hora, e escolher errado é justamente o que deixa componente ilegível

Switch: quando você compara UMA variável contra vários valores fixos (status, tipo, papel do usuário, aba selecionada)

if-else: quando as condições são diferentes entre si, tipo uma checando carregamento e a outra checando permissão do usuário, aqui o switch não ajuda

Ternário: só pra decisão de dois caminhos, curtinha, dentro do JSX mesmo

Objeto de mapeamento: quando é só um de-para de chave pra valor ou componente, sem lógica nenhuma no meio

O de-para fica assim:

const telas = {
carregando: <Carregando />,
erro: <MensagemDeErro />,
sucesso: <Lista />
}

Enxuto né? 😀

Mas tem um detalhe que muita gente ignora: o objeto monta TODOS os valores de uma vez

Então se cada item for pesado, ou tiver algum efeito colateral, o switch leva vantagem, porque ele executa só o case que bateu

Tem gente que trata isso como guerra santa, mas é mais simples do que parece: switch quando tem lógica, mapa quando é só trocar chave por valor

Erros comuns ao usar switch no React:

Antes que você caia neles, se liga nos que mais aparecem

Esquecer o break: sem ele o JavaScript continua executando os cases de baixo (o famoso fallthrough) e sua mensagem vira a do case errado. Se cada case terminar em return, esse problema some sozinho

Comparar tipos diferentes: o switch usa comparação estrita, então case 1 NÃO pega a string '1'. Tome cuidado quando o valor vem de um input ou de parâmetro de rota, porque ali ele costuma chegar como texto

Declarar variável dentro do case: const e let valem pro bloco do switch inteiro, e você toma erro de redeclaração quando repete o nome em outro case. Resolve envolvendo o corpo do case em chaves

Colocar lógica pesada no case: se um case está com dez linhas, ele está pedindo pra virar componente. Deixa o switch só escolhendo, e cada tela no arquivo dela

E se eu esquecer um caso? (o truque do TypeScript)

Essa é a parte que mais mudou desde que switch virou rotina em projeto React: hoje muito projeto novo já nasce em TypeScript

E dá pra fazer o próprio compilador cobrar de você os casos que faltaram

A ideia é ter um default que só compila se NENHUM caso sobrou:

type Status = 'carregando' | 'erro' | 'sucesso'

function Painel({ status }: { status: Status }) {
switch (status) {
case 'carregando':
return <Carregando />
case 'erro':
return <MensagemDeErro />
case 'sucesso':
return <Lista />
default: {
const naoTratado: never = status
return naoTratado
}
}
}

Que feitiço é esse? Se todos os casos já foram tratados, o que sobra no default é o tipo never, e a atribuição passa numa boa

Aí você adiciona um 'vazio' no seu tipo Status e esquece de criar o case: o TypeScript aponta o dedo na hora, antes de ir pra produção

Muito massa isso

Em JavaScript puro essa rede não existe, então lá o default continua sendo a sua única proteção