8 Maneiras de Implementar Técnicas de Renderização Condicional no React

A renderização condicional é uma característica poderosa no React que te permite a exibição de componentes com base em certas condições. Ela desempenha um papel crucial na criação de interfaces de usuário dinâmicas e interativas. Porém, entender como a renderização condicional funciona no React e dominar sua implementação pode ser desafiador para os desenvolvedores, especialmente para aqueles novos na estrutura.

É por isso que este guia abrangente está aqui para ajudar. Este artigo oferece uma explicação detalhada da renderização condicional no React junto com exemplos práticos para ajudá-lo a se tornar um mestre nisso.

Então, vamos mergulhar e desbloquear todo o potencial da renderização condicional no React!

Entendendo a renderização condicional no React

A renderização condicional é o processo de renderizar componentes com base em certas condições. Isso permite aos desenvolvedores criar interfaces de usuário mais dinâmicas e responsivas.

No React, existem vários métodos para lidar com a renderização condicional, sendo eles:

Declarações If/Else
Operador ternário (?)
E (&&) Lógico
Operador de coalescência nula (??)
Declarações de switch case
Limites de erro (Error Boundaries)
Componentes de ordem superior (HOCs)
Props de renderização

Vamos mergulhar na explicação de cada abordagem.

Declarações If/Else

Declarações if/else tradicionais ajudam a executar partes específicas do código com base se uma condição é verdadeira ou falsa. Este é um método direto para controlar o fluxo com base em condições.

import React, { useState } from 'react';

export default function UserGreeting() {
  // Variável de estado para o status de login
  const [isLoggedIn, setIsLoggedIn] = useState(false); // Define o estado inicial como "não logado"
  let content; // Variável para armazenar o conteúdo a ser renderizado com base no status de login
  
  // Verifica o status de login
  if (isLoggedIn) {
    content = <h1>Bem-vindo de volta!</h1>; // Mostra se estiver logado
  } else {
    content = <h1>Por favor, faça login.</h1>; // Mostra se não estiver logado
  }
  
  return (
    <div>
      {content}
      {/* Botão para alternar o status de login */}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? 'Sair' : 'Entrar'}
      </button>
    </div>
  );
}

As declarações if/else verificam uma condição: se a condição for verdadeira, o código dentro do bloco ‘if’ é executado. Caso contrário, o bloco ‘else’ é executado.

Operador Ternário (?)

O operador ternário é um substituto de uma única linha para a declaração ‘if-else’. Ele verifica uma condição e retorna um valor se for verdadeiro e outro se for falso. É conciso e ideal para renderização condicional simples em JSX.

import React, { useState } from 'react';

export default function UserGreeting() {
  // Variável de estado para o status de login
  const [isLoggedIn, setIsLoggedIn] = useState(false); // Define o estado inicial como "não logado"

  return (
    <div>
      {/* Verifica o status de login e exibe a saudação correspondente */}
      {isLoggedIn ? <h1>Bem-vindo de volta!</h1> : <h1>Por favor, faça login.</h1>}
      {/* Botão para alternar o status de login */}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? 'Sair' : 'Entrar'}
      </button>
    </div>
  );
}

E (&&) Lógico

O operador lógico && retorna o segundo operando se o primeiro for verdadeiro, caso contrário, retorna o primeiro. No React, é útil para incluir um elemento apenas se uma condição for verdadeira.

import React, { useState } from 'react';

export default function UserGreeting() {
  // Variável de estado para o status de login
  const [isLoggedIn, setIsLoggedIn] = useState(false); // Define o estado inicial como "não logado"

  return (
    <div>
      {isLoggedIn && <h1>Bem-vindo de volta!</h1>}
      {!isLoggedIn && <h1>Por favor, faça login.</h1>}
      {/* Botão para alternar o status de login */}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? 'Sair' : 'Entrar'}
      </button>
    </div>
  );
}

Operador de Coalescência Nula (??)

O operador de coalescência nula (??) fornece um valor padrão para operandos nulos ou indefinidos. É útil no React para definir conteúdo ou valores de reserva, garantindo que os componentes não quebrem devido a dados ausentes.

import React, { useState } from 'react';

export default function UserProfile() {
  const [user, setUser] = useState({
    name: 'Jane Doe',
    email: 'jane.doe@example.com',
    // Não estamos definindo 'age' inicialmente, representando um cenário
    // onde certos dados podem não estar disponíveis no momento da criação do componente.
    age: undefined,
  });

  // O operador '??' verifica se 'user.age' é nulo ou indefinido.
  // Se for, define uma mensagem padrão como 'Não disponível'.
  const userAge = user.age ?? 'Não disponível';

  return (
    <div>
      <h2>Perfil do Usuário</h2>
      <p><strong>Nome:</strong> {user.name}</p>
      <p><strong>Email:</strong> {user.email}</p>
      {/* Idade utiliza nossa variável com o operador de coalescência nula. */}
      <p><strong>Idade:</strong> {userAge}</p>
    </div>
  );
}

Aqui, o gancho useState é usado para inicializar o estado do usuário. Deixamos intencionalmente a idade como indefinida para representar um caso em que certas informações podem não estar presentes imediatamente ou estejam ausentes.

Dentro do componente, usamos o operador de coalescência nula (??) para lidar com a possibilidade de que a idade possa ser nula ou indefinida. Se user.age estiver ausente, a variável userAge assume o valor padrão ‘Não disponível’, que é então renderizado. Isso garante que mesmo se os dados da idade não estiverem presentes, nosso componente possa lidar graciosamente com essa ausência e fornecer uma alternativa, mantendo uma interface completa e amigável ao usuário.

Declarações de switch case

A declaração ‘switch’ avalia uma expressão e executa o bloco ‘case’ relevante, correspondendo ao valor da expressão. É ótimo para várias condições que levam a diferentes renderizações no React, garantindo código organizado e legível.

import React, { useState } from 'react';

export default function UserStatus() {
  // Variável de estado para o tipo de usuário
  const [userType, setUserType] = useState('guest'); // Pode ser 'admin', 'member' ou 'guest'

  let content;

  // Determina a mensagem a ser exibida com base no tipo de usuário
  switch (userType) {
    case 'admin':
      content = <h1>Bem-vindo Administrador!</h1>;
      break;
    case 'member':
      content = <h1>Bem-vindo Membro!</h1>;
      break;
    case 'guest':
    default:
      content = <h1>Bem-vindo Convidado, por favor, cadastre-se.</h1>;
      break;
  }

  return (
    <div>
      {content}
      {/* Botão para alterar o tipo de usuário para 'admin' */}
      <button onClick={() => setUserType('admin')}>Definir como Administrador</button>
    </div>
  );
}

Técnicas Avançadas de Renderização Condicional

Após dominar os métodos básicos, você pode encontrar cenários que exigem soluções mais sofisticadas. Essas técnicas avançadas são comumente usadas em aplicativos maiores ou casos específicos que exigem níveis mais elevados de abstração:

Limites de Erro (Error Boundaries)

Limites de erro (Error Boundaries) são componentes que capturam erros JavaScript em qualquer lugar na árvore de componentes filhos, registram esses erros e exibem uma interface de usuário alternativa em vez da árvore de componentes que falhou. Eles são como um bloco catch para componentes.

Papel na Renderização Condicional: Os limites de erro renderizam condicionalmente uma interface de usuário alternativa quando há um erro em uma subárvore de componentes. Em vez de todo o aplicativo travar e exibir um erro, apenas a subárvore de componentes com o erro é substituída por uma interface de usuário alternativa definida pelo usuário.

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Atualiza o estado para que a próxima renderização mostre a UI de fallback.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Você também pode registrar o erro em um serviço de relatório de erros
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Você pode renderizar qualquer UI de fallback personalizada
      return <h1>Algo deu errado.</h1>;
    }

    return this.props.children;
  }
}

// Use-o como um componente regular
<ErrorBoundary>
  <MeuComponente />
</ErrorBoundary>

Componentes de Ordem Superior (HOCs)

HOCs são funções que envolvem componentes, permitindo reutilizar a lógica do componente. Eles podem renderizar condicionalmente componentes com base nas props que recebem, oferecendo uma maneira mais flexível de compartilhar lógica entre componentes.

Imagine que temos uma funcionalidade que só deve ser visível para usuários com uma conta premium. Vamos criar um HOC que verifica o tipo de conta do usuário e renderiza condicionalmente o componente de acordo.

Primeiro, definimos nosso HOC, withPremiumFeature, em seu próprio arquivo (por exemplo, withPremiumFeature.js):

import React from 'react';

// Este é nosso HOC. Ele recebe um componente e retorna um novo componente.
const withPremiumFeature = (WrappedComponent) => {
  return (props) => {
    // Para este exemplo, supomos que 'isPremium' seja passado para o componente.
    const { isPremium } = props;

    if (isPremium) {
      // Se o usuário for um usuário premium, renderize o WrappedComponent
      return <WrappedComponent {...props} />;
    } else {
      // Se o usuário não for premium, renderize uma mensagem em vez disso
      return <div>Desculpe, este recurso está disponível apenas para usuários premium.</div>;
    }
  };
};

export default withPremiumFeature;

Agora, vamos criar um componente que desejamos renderizar condicionalmente com base no status premium do usuário. Isso poderia ser qualquer componente de recurso – por exemplo, SpecialFeature.js.

import React from 'react';

const SpecialFeature = () => {
  return <div>Este é um recurso premium!</div>;
};

export default SpecialFeature;

Em seguida, vamos aprimorar nosso componente SpecialFeature com o HOC withPremiumFeature para adicionar a funcionalidade de renderização condicional com base no tipo de conta do usuário.

import withPremiumFeature from './withPremiumFeature';
import SpecialFeature from './SpecialFeature';

// Aprimore nosso componente, integrando o recurso de renderização condicional
const SpecialFeatureForPremiumUsers = withPremiumFeature(SpecialFeature);

Props de Renderização

Este padrão envolve uma função passada como prop para um componente, que retorna um elemento React. É usado para compartilhar lógica de renderização entre componentes, permitindo renderizar condicionalmente diferentes partes da interface do usuário dependendo do estado, props ou lógica contida na prop de renderização.

Vamos considerar um cenário onde queremos criar um componente reutilizável que acompanha se um usuário está online ou não, e então renderiza conteúdo condicionalmente com base nesse status.

Primeiro, vamos criar o componente UserOnlineStatus. Em vez de renderizar algo por conta própria, ele aceitará uma função como sua prop ‘render’ e delegará a responsabilidade de renderização para essa função. Ele também passará o estado ‘isOnline’ para essa função.

import React, { useState, useEffect } from 'react';

const UserOnlineStatus = ({ render }) => {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    const timeout = setTimeout(() => {
      // Vamos supor que, após 2 segundos, sabemos que o usuário está online.
      setIsOnline(true);
    }, 2000);

    return () => clearTimeout(timeout); // Limpa o timeout ao desmontar o componente.
  }, []);

  // Em vez de retornar seu próprio JSX, ele chama a propriedade de renderização
  // (render prop), passando a ela o estado isOnline.
  return render(isOnline);
};

export default UserOnlineStatus;

Agora, no componente pai, podemos usar o UserOnlineStatus e passar uma função para ele para renderizar nosso conteúdo desejado com base no status online do usuário.

import React from 'react';
import UserOnlineStatus from './UserOnlineStatus'; // supondo que o arquivo está salvo aqui

const App = () => {
  const renderStatus = (isOnline) => {
    if (isOnline === null) {
      return <div>Verificando status...</div>; // Isso poderia ser um indicador de carregamento.
    } else if (isOnline) {
      return <div>Bem-vindo, usuário! Você está online.</div>;
    } else {
      return <div>Você está offline. Por favor, verifique sua conexão.</div>;
    }
  };

  return (
    <div>
      {/* Outros componentes podem ser colocados aqui */}
      <h1>Painel do Usuário</h1>
      {/*
        O componente 'UserOnlineStatus' é usado aqui, passando a função "renderStatus"
        como a render prop.
        Esta função receberá o status 'isOnline' e renderizará condicionalmente
        o conteúdo apropriado.
      */}
      <UserOnlineStatus render={renderStatus} />
    </div>
  );
};

export default App;

Neste exemplo, o componente UserOnlineStatus é responsável por determinar o status online de um usuário, mas não por renderizar diretamente a interface do usuário. Em vez disso, ele delega a renderização para uma propriedade (a prop render), que é uma função passada pelo componente pai (App neste caso). Esta função (renderStatus) recebe o status isOnline e decide o que renderizar com base nesta informação.

Melhores Práticas para Renderização Condicional no React

Entender várias técnicas de renderização condicional é crucial, mas saber quando usar cada técnica em seu aplicativo React é igualmente importante. Aqui estão algumas melhores práticas para orientar seu processo de tomada de decisão:

Declarações If/Else: Use declarações if/else tradicionais para lógica de ramificação simples, como renderizar componentes com base em uma única condição. Esta abordagem é direta e fácil de ler. Quando suas condições são simples e limitadas, declarações if/else são frequentemente uma boa escolha.
Operador Ternário (?): O operador ternário é ideal para renderização condicional concisa, especialmente quando você precisa renderizar um de dois componentes com base em uma única condição. É uma ótima opção para cenários simples onde você deseja manter seu JSX limpo e legível.
E (&&) Lógico: Quando você deseja renderizar um componente apenas se uma condição for verdadeira, o operador && lógico é uma escolha limpa e eficiente. No entanto, seja cauteloso ao lidar com valores que podem ser falsos, como números ou strings vazias.
Operador de Coalescência Nula (??): Use o operador de coalescência nula para fornecer valores padrão para operandos nulos ou indefinidos. É particularmente útil quando você precisa garantir que os componentes não quebrem devido a dados ausentes. Esta técnica garante uma renderização robusta, mesmo quando os dados podem estar ausentes.
Declarações de Switch Case: Empregue declarações de switch case quando tiver múltiplas condições levando a renderizações diferentes. Esta abordagem mantém seu código organizado e legível, tornando-a uma excelente escolha para cenários complexos com múltiplos ramos condicionais.

Técnicas Avançadas para Casos de Uso Específicos:

Limites de Erro (Error Boundaries): Os limites de erro (Error Boundaries) brilham quando você precisa lidar com erros JavaScript de forma graciosa e evitar que todo o seu aplicativo trave. Considere usá-los quando quiser isolar e renderizar condicionalmente uma IU de fallback para uma subárvore específica de componentes. Os limites de erro ajudam a manter uma experiência de usuário suave mesmo diante de erros.
Componentes de Ordem Superior (HOCs): Os HOCs são poderosos para encapsular e reutilizar a lógica do componente, e se destacam em cenários onde você deseja renderizar condicionalmente componentes com base em props ou condições específicas do usuário. Por exemplo, você pode usar HOCs para renderizar recursos disponíveis apenas para usuários premium. Eles oferecem uma maneira flexível de compartilhar lógica entre componentes, mantendo sua base de código limpa.
Props de Renderização: Quando você precisa de controle refinado sobre a renderização e deseja compartilhar lógica de renderização entre componentes, o padrão de props de renderização é uma escolha sólida. É adequado para cenários onde você precisa renderizar condicionalmente diferentes partes da sua IU com base no estado, props ou lógica complexa contida na função de prop de renderização.

Seguindo essas melhores práticas, você tomará decisões informadas ao implementar a renderização condicional em seus aplicativos React. Cada técnica tem seus pontos fortes e escolher a correta para o trabalho pode levar a um código mais limpo, mais fácil de manter e uma melhor experiência do usuário.

Dicas, Truques e Armadilhas Comuns na Renderização Condicional

Navegar pelo cenário de renderização condicional no React pode parecer simples à primeira vista. No entanto, desenvolvedores experientes sabem que a jornada é repleta de nuances que, se mal interpretadas, podem levar a bugs e renderizações ineficientes. Abaixo estão algumas dicas profissionais e armadilhas comuns para ficar atento:

Excesso de Uso de Operadores Ternários

Dica: Embora os operadores ternários (condição ? verdadeiro : falso) sejam fantásticos por sua concisão, eles podem prejudicar a legibilidade em condições complexas e aninhadas. Use-os para condições diretas.

Armadilha: Evite aninhar operadores ternários. Se você se pegar fazendo isso, provavelmente é um sinal de que deve refatorar em componentes separados ou usar uma abordagem mais adequada, como declarações if ou criar funções de renderização específicas.

Abuso do Operador Lógico && para Curtos-Circuitos

Dica: O operador lógico && é uma maneira limpa de renderizar componentes quando uma condição é verdadeira. No entanto, certifique-se de que o estado falso da condição não renderize nada inadvertidamente. Isso é especialmente verdadeiro para números (0 é falso) e strings.

Armadilha: Tenha cuidado ao lidar com números. Por exemplo, {count && <Componente />} falhará em renderizar <Componente /> se count for 0, pois 0 é um valor falso em JavaScript.

Uso Incorreto do Operador de Coalescência Nula ??

Dica: Use o operador de coalescência nula (??) quando desejar renderizar conteúdo alternativo para valores nulos ou indefinidos, não para todos os valores falsos.

Armadilha: Não confunda com o operador lógico ||. A expressão valor ?? alternativa só mostra “alternativa” se “valor” for nulo ou indefinido, enquanto valor || alternativa mostra “alternativa” para todos os valores falsos (por exemplo, ”, 0, false).

Dominar a renderização condicional no React é uma habilidade essencial para desenvolvedores que desejam criar interfaces de usuário dinâmicas e interativas. Com uma compreensão sólida dos conceitos e técnicas discutidos neste guia, você estará bem equipado para lidar com desafios de renderização complexos em seus projetos React.

O que achou das dicas? Conta pra gente nos comentários.

Código Limpo Melhores Práticas