Forem: Vânia Gomes

Entendendo props e useState no React: Como Passar e Gerenciar Dados Entre Componentes

Vânia Gomes — Thu, 21 Nov 2024 10:52:42 +0000

Para entender o uso de props e useState no React, vamos dar um passo atrás e conhecer dois paradigmas de programação: a programação imperativa e a programação declarativa. Compreender esses conceitos ajuda a entender como o React funciona.

Na programação imperativa, o foco está em "como fazer". O programador escreve um código que orienta o computador, passo a passo, em cada detalhe necessário para resolver um problema.

Imagine que você está ensinando seu amigo robô a limpar o quarto. Na abordagem imperativa, você vai dar uma lista completa e detalhada de tudo o que ele deve fazer, sem pular nenhuma etapa.

Exemplo de Limpeza Imperativa:

Vá até o chão perto da porta.
Pegue todos os brinquedos que estão lá.
Coloque os brinquedos na caixa de brinquedos.
Vá até a cama.
Arrume o travesseiro e o cobertor.
Pegue os livros que estão no chão.
Coloque os livros na estante.

Aqui, você explica exatamente como fazer cada coisa, do começo ao fim, garantindo que nenhuma etapa seja esquecida.

Na programação declarativa, em vez de explicar tudo o que deve ser feito, você dá instruções para que as coisas aconteçam quando algo específico ocorrer. É como deixar uma regra pronta e deixar o robô agir quando necessário, sem precisar de você toda hora para dizer o que fazer.

Como Funciona?

Imagine que você fala para o seu amigo robô assim:

"Quando alguém deixar um brinquedo fora da caixa, coloque-o de volta."
"Quando a cama estiver desarrumada, arrume-a."

Essas são instruções declarativas! O robô entende que, se alguém deixar um brinquedo fora da caixa, ele deve guardar o brinquedo. E se a cama estiver bagunçada, ele arruma sozinho. Você não precisa explicar o passo a passo; o robô vai perceber quando uma dessas coisas acontecer e vai resolver.

No React, a programação declarativa facilita a criação de interfaces de maneira mais simples e organizada. Com ela, você usa props e useState para definir o que a interface deve mostrar em resposta a mudanças, sem precisar de um passo a passo detalhado.

Como props e useState funcionam na Programação Declarativa do React

Na abordagem declarativa, o React permite que você descreva o que deseja que apareça na interface. As props funcionam como "informações" passadas de um componente para outro, definindo o que deve ser exibido ou utilizado em cada componente. O useState, por sua vez, permite que o componente tenha seu próprio "estado" e reaja automaticamente a mudanças nesse estado, atualizando a interface conforme necessário.

No React, props e useState são fundamentais para gerenciar dados e criar interatividade. Vamos explorar como essas duas funcionalidades funcionam e como usá-las para passar dados entre componentes e armazenar valores dinâmicos no estado.

Trabalhando com props: Como Passar Dados Entre Componentes

As props (abreviação de "propriedades") permitem que dados sejam passados de um componente pai para um componente filho. Isso possibilita a criação de uma estrutura onde componentes podem receber informações específicas e renderizá-las de acordo.

Exemplo de Passagem de props

Suponha que temos um objeto post com informações sobre o autor e conteúdo:

const post = {
  author: {
    name: "Dr. Ana Maria",
    role: "Psicóloga",
    avatarUrl: "/images/ana-avatar.png",
  },
  publishedAt: "2024-11-01",
  content: [
    { type: "paragraph", content: "Lembre-se de praticar a gratidão diariamente." },
    { type: "link", content: "https://bemestar.com.br" },
  ],
};

Agora, passamos author, publishedAt, e content para o componente Post usando props:

<Post
  author={post.author}
  publishedAt={post.publishedAt}
  content={post.content}
/>

Acessando props no Componente Filho

function Post(props) {
  return (
    <div>
      <img src={props.author.avatarUrl} alt={`${props.author.name} avatar`} />
      <h3>{props.author.name}</h3>
      <p>{props.author.role}</p>
      <span>{props.publishedAt}</span>
    </div>
  );
}

Desestruturação de props: Simplificando o Código

Usar desestruturação para acessar props diretamente no parâmetro da função deixa o código mais legível:

function Post({ author: { name, role, avatarUrl }, publishedAt }) {
  return (
    <div>
      <img src={avatarUrl} alt={`${name} avatar`} />
      <h3>{name}</h3>
      <p>{role}</p>
      <span>{publishedAt}</span>
    </div>
  );
}

Com a desestruturação, cada propriedade é acessada sem a necessidade de prefixar props, deixando o código mais claro.

Gerenciamento de Estado com useState: Controlando Dados Dinâmicos no React

O React oferece o useState para armazenar valores que mudam ao longo do tempo, como uma lista de comentários que cresce com a interação do usuário. Quando o estado muda, o React re-renderiza o componente automaticamente para refletir as novas informações.

Atualizando o Estado com Imutabilidade

Usar o operador de espalhamento (...) é uma prática importante no React para preservar a imutabilidade:

Exemplo de Uso do useState

setComments([...comments, newCommentText]);

Isso cria uma nova cópia de comments com o novo comentário adicionado, mantendo o array original inalterado. A imutabilidade é essencial para garantir que o React detecte mudanças no estado e re-renderize o componente adequadamente.

Imagine que temos um componente Blog _ que exibe um _post e permite adicionar comentários. Usamos useState para controlar o array de comentários e o texto do novo comentário:

import React, { useState } from "react";

function Blog({ author, content }) {
  const [comments, setComments] = useState(["Esse post é muito bacana!"]);
  const [newCommentText, setNewCommentText] = useState("");

  const handleNewCommentChange = (event) => {
    setNewCommentText(event.target.value);
  };

  const handleAddComment = () => {
    setComments([...comments, newCommentText]);
    setNewCommentText(""); // Limpa a textarea após adicionar o comentário
  };

  return (
    <div>
      <h3>Post de {author.name}</h3>
      <p>{content}</p>

      <h4>Comentários:</h4>
      <ul>
        {comments.map((comment, index) => (
          <li key={index}>{comment}</li>
        ))}
      </ul>

      <textarea
        value={newCommentText}
        onChange={handleNewCommentChange}
        placeholder="Escreva seu comentário aqui..."
      />
      <button type="button" onClick={handleAddComment}>
        Adicionar Comentário
      </button>
    </div>
  );
}

Comunicação entre Componentes com props e useState

Para permitir que o componente pai (como o Blog) controle o comportamento de componentes filhos, podemos passar funções como props:

<ChildComponent onDeleteComment={deleteCommentHandler} />

Essa estrutura permite que o componente filho invoque a função deleteCommentHandler, gerenciada pelo componente pai.

**Boas Práticas no React: Entendendo a Key

O Papel da Key

A propriedade key é fundamental para o React identificar de forma eficiente quais itens em uma lista foram:

Adicionados
Removidos
Reordenados.

Essa identificação evita que o React recrie toda a lista durante a renderização, atualizando apenas os elementos necessários e otimizando a performance.

O Problema

Ao inspecionar a aplicação no console, podem surgir erros relacionados à ausência de uma propriedade key nos elementos de uma lista renderizada. Esse erro acontece porque o React precisa de uma key única para diferenciar cada elemento da lista.

**Como Resolver o Erro

Adicione uma key única a cada elemento da lista:

A key deve ser exclusiva para cada item da lista.
Use uma propriedade consistente, como um id.

Exemplo:

posts.map((post) => <Post key={post.id} {...post} />);

Evite usar o índice do array como key

Embora o índice funcione em casos simples, ele pode causar problemas ao adicionar, remover ou reordenar itens na lista, levando a renderizações desnecessárias.

Por Que Não Usar o Índice do Array?

O índice do array não reflete mudanças na posição dos itens.

Exemplo:

Se o item 5 for movido da posição 2 para 4, o React pode interpretar erroneamente a mudança, recriando elementos desnecessariamente. Isso prejudica a performance.

E se Não Houver um id?

Em casos onde não exista um id único, utilize outra propriedade que seja:

Exclusiva
Consistente
E representativa do item como o conteúdo do elemento.

Características de uma Key Ideal

Única: Cada item da lista deve ter sua própria key.
Estável: O valor da key não deve mudar entre renderizações.
Representativa: Use informações que identifiquem claramente cada item, como um id ou conteúdo exclusivo.

Evite:

Usar índices de arrays.
Gerar valores aleatórios no momento da renderização.

Entendendo Atualizações de Estado no React

O Problema
Ao implementar uma funcionalidade de "likes" no React, você pode perceber que, mesmo executando o incremento duas vezes seguidas, o número de likes aumenta apenas de 1 em 1.

Isso ocorre porque o React não atualiza imediatamente o estado na memória. Ele agende uma nova renderização, e qualquer código que dependa do valor atualizado do estado será executado com o valor anterior, criando uma inconsistência.

Por Que Isso Acontece?

1. Atualização de Estado no React
Quando você chama setState (como setLikes):

O React não altera imediatamente o valor do estado.
Em vez disso, ele agende uma atualização e recalcula o componente em uma nova renderização.

2. Contexto de Execução

O React cria um novo "contexto" para cada renderização.
Se você usar setLikes(likes + 1) duas vezes seguidas, ambas as chamadas usarão o valor do estado atual no contexto antigo, resultando em apenas um incremento.

3. Closure no React

As funções usadas para atualizar o estado fecham o contexto em que foram criadas.
Mesmo após a atualização do estado, as execuções subsequentes ainda utilizam o valor anterior.

Soluções para o Problema

1. Criar uma Variável Temporária
Uma abordagem simples é armazenar o novo valor em uma variável antes de atualizar o estado.

Exemplo:

const newLikeCount = likeCount + 1;
setLikeCount(newLikeCount);
console.log(newLikeCount); // Valor atualizado

Aqui, a variável newLikeCount reflete o valor atualizado, enquanto o estado ainda não foi atualizado na memória.

2. Usar o Callback do setState

O React permite passar uma função para setState ao invés de um valor direto. Essa função recebe o valor mais recente do estado como argumento, garantindo que múltiplas atualizações usem o valor correto.

Exemplo:

setLikeCount((prevLikeCount) => prevLikeCount + 1);

prevLikeCount é sempre o valor mais atualizado do estado.
Isso resolve problemas de dependência entre atualizações consecutivas.

Por Que Usar o Callback é melhor?

Ele garante que você está sempre utilizando o valor mais recente do estado.
É a abordagem recomendada quando a nova atualização depende do valor anterior do estado, como somar ou subtrair valores.

Exemplo Prático: Incrementar de 2 em 2
Se você quiser incrementar o número de likes de 2 em 2, pode usar o callback para garantir o funcionamento correto:

function handleLike() {
   setLikeCount((prevLikeCount) => prevLikeCount + 1);
   setLikeCount((prevLikeCount) => prevLikeCount + 1);
}

Com o uso do callback, cada atualização utiliza o valor mais recente, resultando em incrementos precisos.

Dica Final

Sempre que a nova atualização do estado depender do valor anterior, use o callback. Essa prática evita bugs sutis e torna seu código mais robusto e previsível.

Padrão recomendado:

setState((prevState) => {
   // Atualização segura e previsível
   return prevState + novoValor;
});

Com essas soluções, você pode lidar de forma eficiente com as atualizações de estado no React e criar funcionalidades mais estáveis e performáticas.

Conclusão

Ao entender props e useState, você pode criar componentes React que são dinâmicos, reutilizáveis e fáceis de manter. Props permitem passar dados entre componentes e useState permite gerenciar valores que mudam ao longo do tempo, tudo de maneira que o React re-renderize apenas o necessário.

React e SOLID: A Componentização Perfeita no Text Decoder Challenge

Vânia Gomes — Fri, 06 Sep 2024 16:34:36 +0000

Introdução

A componentização é um dos pilares fundamentais do React. Ela permite dividir a interface em partes menores, independentes e reutilizáveis, facilitando a manutenção, a escalabilidade e a legibilidade do código. No projeto Text Decoder Challenge, utilizamos essa abordagem para organizar a interface de codificação e decodificação de textos de maneira eficiente. Além disso, aplicamos intencionalmente alguns dos princípios SOLID, que, quando combinados com a componentização, resultam em um código mais modular, flexível, facilidade para realizar os teste e fácil de manter.

O Que é Componentização?

Componentização é o processo de dividir a interface do usuário em componentes. Cada componente encapsula uma funcionalidade específica, tornando o código mais modular. No React, os componentes funcionam como funções JavaScript, que aceitam "props" (propriedades) e retornam elementos que descrevem o que deve ser renderizado na tela.

No Text Decoder Challenge, cada parte da interface – o campo de texto, os botões de codificar e decodificar, e o campo de exibição dos resultados – é um componente separado. Isso torna o código mais fácil de gerenciar e possibilita a reutilização desses componentes em diferentes contextos.

Propriedades (Props) e Estado (State)

As props e o useState têm uma relação direta com a componentização no React, pois são ferramentas essenciais para a criação e funcionamento dos componentes.

Relação das props com a Componentização

Props (propriedades) permitem que os componentes se comuniquem entre si. Em um projeto componentizado, como o Text Decoder Challenge, diferentes componentes podem ter suas responsabilidades individuais (como um Button ou Textarea), mas eles precisam trocar informações para funcionar de maneira coesa.
As props são a forma de passar dados de um componente pai para um componente filho. Isso é fundamental para manter a modularidade, pois os componentes filhos são reutilizáveis e independentes, mas ainda podem exibir ou agir com base nas informações recebidas do componente pai.
Exemplo no Text Decoder Challenge: O componente Textarea recebe o valor do texto via props do componente pai (como o Decoder ou App), o que permite que o mesmo componente de entrada seja reutilizado em diferentes contextos, exibindo valores diferentes.

export function Textarea({ value, onChange, placeholder, className, ...props }) {
  return (
    <textarea
      value={value}
      onChange={onChange}
      placeholder={placeholder}
      className={className}
      {...props}
    />
  );
}

Uso do Textarea no componente App

<section className={styles.container_text}>
          <Textarea
            id="inputApp"
            value={inputValue}
            onChange={handleInputChange}
            placeholder="Digite seu texto"
            className={styles.container__text__input}
          />
</section>

Relação do useState com a Componentização

O useState é o hook que gerencia o estado interno de um componente. Ele é crucial para permitir que os componentes tenham seu próprio comportamento dinâmico, independentemente do restante da aplicação. Cada componente pode ter seu próprio estado (como o valor do texto inserido no Textarea ou o feedback de cópia bem-sucedida no Decoder), permitindo que reaja às interações do usuário de forma isolada.
A componentização se beneficia diretamente da utilização do useState, já que o estado gerenciado dentro de cada componente é encapsulado, o que garante que o comportamento seja específico daquele componente sem interferir em outros.
Exemplo no Text Decoder Challenge: O componente Decoder utiliza o useState para controlar o valor da entrada de texto e o sucesso da cópia. Isso mantém a lógica local, dentro do componente, promovendo a separação de responsabilidades e encapsulamento.

Hook useCopyMessage

import { useState } from "react";

export function useCopyMessage() {
  const [copySuccess, setCopySuccess] = useState('');

  function showMessage(message, duration = 3000) {
    setCopySuccess(message);
    setTimeout(() => {
      setCopySuccess('');
    }, duration);
  }

  return { copySuccess, showMessage };
}

Utilitário copyUtil

export function copyTextToClipboard(text, showMessage) {
  navigator.clipboard.writeText(text)
    .then(() => {
      showMessage('Texto copiado com sucesso!');
    })
    .catch(() => {
      showMessage('Ops, ocorreu um erro ao copiar o texto!');
    });
}

Uso do hook e do utilitário no componente Decoder

export function Decoder({ outputValue }) {
  const { copySuccess, showMessage } = useCopyMessage();

  function handleCopyText() {
    copyTextToClipboard(outputValue, showMessage);
  }

    rendering UI 

 {copySuccess && ( <p className={styles.copyMessage}>{copySuccess}</p> )}
}

Exemplo Prático: Desafio do Decodificador de Texto

O Text Decoder Challenge permite que o usuário insira um texto e escolha entre codificar ou decodificar a mensagem. O projeto também fornece a opção de copiar o texto que deseja realizar a criptografia ou descriptografia para a área em que será realizada a codificação ou decodificação. A seguir, a estrutura básica do projeto, com componentes para cada parte essencial da interface:

Aplicando a Componentização

A estrutura do projeto já foi organizada de forma a utilizar componentes. Aqui estão os principais componentes identificados:

Button: Um componente reutilizável para criar diferentes botões (por exemplo, "Codificar", "Decodificar", "Copiar").

No início, o componente Button exigia que eu criasse novas classes CSS para cada estilo de botão diferente. Além disso, para mover o botão "Copiar" um pouco mais para cima quando ele fosse clicado, eu precisava realizar verificações manuais, o que resultava em duplicação de código e manutenção trabalhosa, pois as alterações precisavam ser feitas em vários locais da aplicação. Isso também gerava inconsistência visual, já que o estilo dos botões não era centralizado.

Com a introdução da prop classNameVariant, o componente Button tornou-se escalável. Agora, novos tipos de botões e estilos podem ser adicionados simplesmente passando um novo valor para a prop classNameVariant, sem a necessidade de modificar o código base do componente. Isso permitiu aplicar o Princípio Aberto/Fechado (OCP), já que o componente está aberto para extensão, mas fechado para modificação. Dessa forma, a manutenção ficou mais simples, e a consistência visual foi garantida em toda a aplicação.

Além disso, o componente Button segue o Princípio da Responsabilidade Única (SRP), uma vez que ele é responsável apenas por renderizar o botão e lidar com o evento de clique. Toda a lógica relacionada ao comportamento do clique é delegada externamente por meio da prop onClick, o que garante que o Button permaneça simples e focado em sua única responsabilidade. Isso evita que o componente fique sobrecarregado com várias responsabilidades, tornando o código mais claro e de fácil manutenção.

export function Button({ label, onClick, type, classNameVariant, className }) {
  return (
    <button
      type={type}
      onClick={onClick}
      className={`${className} ${classNameVariant} ${className}`}
    >
      {label}
    </button>
  );
}

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
  type: PropTypes.oneOf(['button', 'submit', 'reset']),
  classNameVariant: PropTypes.oneOf(['btn__encrypt', 'btn__decrypt', 'btn__copy']),
  className: PropTypes.string,
};

Button.defaultProps = {
  type: 'button',
  classNameVariant: '',
  className: '',
};

Decoder: está apenas focado em renderizar e gerenciar a UI.

O componente Decoder está seguindo o SRP ao manter a responsabilidade principal focada na renderização da interface para decodificar e copiar texto. Ele não está diretamente lidando com a lógica de cópia ou manipulação de estado; essas funcionalidades foram separadas em outros módulos:

A lógica de exibir a mensagem de cópia foi delegada para o hook useCopyMessage.
A função de copiar o texto para a área de transferência foi movida para o utilitário copyTextToClipboard.

O DIP foi aplicado ao separar a lógica de cópia e manipulação de mensagens em módulos externos (useCopyMessage e copyTextToClipboard). O componente Decoder depende de abstrações (no caso, um hook e um utilitário) em vez de lidar com a implementação concreta diretamente no componente.

Essa abordagem mantém o componente Decoder desacoplado da lógica específica, tornando-o mais fácil de testar e modificar. Se a implementação de como copiar o texto para a área de transferência mudar, ou se a forma de exibir a mensagem de sucesso for alterada, o componente Decoder não precisará ser modificado, já que ele apenas consome essas funcionalidades através de dependências injetadas.

Hook useCopyMessage

import { useState } from "react";

export function useCopyMessage() {
  const [copySuccess, setCopySuccess] = useState('');
  function showMessage(message, duration = 3000) {
    setCopySuccess(message);
    setTimeout(() => {
      setCopySuccess('');
    }, duration);
  }
  return { copySuccess, showMessage };
}

Utilitário copyTextToClipboard

export function copyTextToClipboard(text, showMessage) {
  navigator.clipboard.writeText(text)
    .then(() => {
      showMessage('Texto copiado com sucesso!');
    })
    .catch(() => {
      showMessage('Ops, ocorreu um erro ao copiar o texto!');
    });
}

Componente Decoder

export function Decoder({ outputValue }) {
  const { copySuccess, showMessage } = useCopyMessage();

  function handleCopyText() { 
   copyTextToClipboard(outputValue, showMessage);
  }

   return ( 
          rendering UI 
   );
}

Textarea: Campo de entrada de texto, que pode ser reutilizado em diferentes partes do projeto.

O Princípio da Responsabilidade Única (SRP) foi aplicado no componente Textarea, garantindo que sua única função seja renderizar um campo de texto e propagar mudanças através do evento onChange. O componente não lida com lógica adicional, como validação ou manipulação de dados; toda a manipulação é feita externamente, e ele apenas se preocupa com a renderização do elemento <textarea> baseado nas props fornecidas, como value, onChange e placeholder. Além disso, o Princípio Aberto/Fechado (OCP) é aplicado, uma vez que o componente está aberto para extensão através das props adicionais (...props) e fechado para modificação. Isso significa que novas funcionalidades ou atributos podem ser adicionados ao <textarea> sem modificar o código original do componente, graças ao uso do spread operator, que permite passar outras props HTML, como disabled ou maxlength.

Componente Textarea

export function Textarea({ value, onChange, placeholder, className, ...props }) {
  return (
    <textarea
      value={value}
      onChange={onChange}
      placeholder={placeholder}
      className={className}
      {...props}
    />
  );
}
};

App: O Princípio da Responsabilidade Única (SRP) é aplicado ao componente App para realizar apenas uma tarefa específica,tanto internamente quanto externamente.

Ele gerencia o estado e a lógica principal, delegando a renderização e funções específicas para componentes como Header, Textarea, Button e Decoder. Cada um desses componentes tem uma responsabilidade clara e única, seja exibir o cabeçalho, capturar a entrada de texto, disparar uma ação com botões ou exibir o resultado.

Funções específicas de validação
A função validationTextareField é responsável exclusivamente por validar a entrada de texto, tanto para criptografia quanto para descriptografia. Isso isola a lógica de validação em uma função separada, facilitando ajustes futuros.

function validationTextareField(inputValue, isDecrypt = false) {
  if (!inputValue.trim()) {
    setErrorMessage('Campo de entrada está vazio!');
    return false;
  }

  if (isDecrypt) {
    if (!/^[a-z!]+$/.test(inputValue)) {
      setErrorMessage('Texto criptografado inválido!');
      return false;
    }
  } else {
    if (!/^[a-z ]+$/.test(inputValue)) {
      setErrorMessage('Texto para decodificação inválido!');
      return false;
    }
  }

  return true;
}

Funções de Utilidades
As funções encryptText e decryptText são separadas em um módulo de utilidades (decodeUtil), dedicadas exclusivamente ao processo de criptografia e descriptografia do texto. Isso mantém o foco dessas funções em uma única tarefa específica, sem misturar responsabilidades.

export const encryptText = (input) => {
    return input.split('').map(char => String.fromCharCode(char.charCodeAt(0) + 1)).join('');
  };

  export const decryptText = (input) => {
    return input.split('').map(char => String.fromCharCode(char.charCodeAt(0) - 1)).join('');
  };

Código de Exemplo do Componente App

// Funções de utilidades para criptografia e descriptografia
export const encryptText = (input) => {
  return input.split('').map(char => String.fromCharCode(char.charCodeAt(0) + 1)).join('');
};

export const decryptText = (input) => {
  return input.split('').map(char => String.fromCharCode(char.charCodeAt(0) - 1)).join('');
};

import React, { useState } from "react";
import { encryptText, decryptText } from "./utils/decodeUtil";

import { Button } from "./components/Button/Button";
import { Decoder } from "./components/Decoder/Decoder";
import { Header } from "./components/Header/Header";
import { Textarea } from "./components/Textarea/Textarea";

import bi_exclamation from "./assets/bi_exclamation-circle-fill.png";

import styles from "./App.module.css";
import "./styles/global.css";

function App() {
  const [inputValue, setInputValue] = useState('');
  const [outputValue, setOutputValue] = useState('');
  const [errorMessage, setErrorMessage] = useState('');

  // Função de validação ajustada
  function validationTextareField(inputValue, isDecrypt = false) {
    if (!inputValue.trim()) {
      setErrorMessage('Campo de entrada está vazio!');
      return false;
    }

    if (isDecrypt) {
      if (!/^[a-z!]+$/.test(inputValue)) {
        setErrorMessage('Texto criptografado inválido!');
        return false;
      }
    } else {
      if (!/^[a-z ]+$/.test(inputValue)) {
        setErrorMessage('Texto para decodificação inválido!');
        return false;
      }
    }
    return true;
  }

  function handleEncrypt() {
    if (!validationTextareField(inputValue)) return;
    const encrypted = encryptText(inputValue);
    setOutputValue(encrypted);
    setErrorMessage('');
  }

  function handleDecrypt() {
    if (!validationTextareField(inputValue, true)) return;
    const decrypted = decryptText(inputValue);
    setOutputValue(decrypted);
    setErrorMessage('');
  }

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
    setErrorMessage('');
  };

  return (
    <div className={styles.app_container}>
      <main className={styles.app__container__main}>
        <Header />
        <section className={styles.container_text}>
          <Textarea
            id="inputApp"
            value={inputValue}
            onChange={handleInputChange}
            placeholder="Digite seu texto"
            className={styles.container__text__input}
          />
          {errorMessage && <p className="error-message">{errorMessage}</p>}
          <div className={styles.container__info__type__text}>
            <div className={styles.content__info__type__text}>
              <img src={bi_exclamation} alt="Aviso do tipo de texto a ser inserido no input" />
              <p className={styles.paragraph__info__type__text}>
                Apenas letras minúsculas e sem acento.
              </p>
            </div>
          </div>
          <div className={styles.btn}>
            <Button
              id="codificador"
              label="Criptografar"
              onClick={handleEncrypt}
              className={styles.btn__encrypt}
            />
            <Button
              id="descriptografar"
              label="Descriptografar"
              onClick={handleDecrypt}
              className={styles.btn__decrypt}
            />
          </div>
        </section>
        <Decoder outputValue={outputValue} />
      </main>
    </div>
  );
}

export default App;

Decoder: O Princípio da Substituição de Liskov (LSP), garante componentes flexíveis e fáceis de reutilizar. No desenvolvimento com React, ele nos incentiva a usar a composição em vez da herança, permitindo que diferentes partes do código possam ser facilmente substituídas sem causar problemas à aplicação.

export function Decoder({ outputValue }) {
  const { copySuccess, showMessage } = useCopyMessage();

  function handleCopyText() {
    copyTextToClipboard(outputValue, showMessage);
  }

  return (
    <section className={styles.container__decoder}>
      <div className={styles.content__text__decoder}>

      {outputValue === '' && (
        <>
          <img
            className={styles.img_text_decoder}
            src={text_decoder} 
            alt="Decodificador de Texto" 
          />

          <h1
            className={styles.title__text_decoder}
          >
              Nenhuma mensagem encontrada
          </h1>
        </>
      )}   

          <Textarea
            id="inputtextDecodificador"
            value={outputValue}
            onChange={e => (e.target.value)} 
            placeholder="Digite um texto que você deseja criptografar ou descriptografar"
            className={`${outputValue ? styles.input__decoder__with__text : styles.input__text__decoder}`}
          />

        <div className={styles.container_copy_button}>
          <Button
            id="inputcopytext"
            onClick={handleCopyText}
            label="Copiar"
            aria-label="Copiar"
            className={styles.btn__copy}
          />
        </div>
      </div>

      {copySuccess && ( <p className={styles.copyMessage}>{copySuccess}</p> )}
    </section>
  );
}

No Decoder, Textarea e Button são usados como subcomponentes, permitindo alterações ou substituições sem afetar o funcionamento geral.

Textarea: O Princípio de Segregação de Interface (ISP), "os clientes não devem depender de interfaces que eles não usam". No contexto de aplicações React, isso significa que os componentes não devem depender de props que não utilizam.
Esse princípio defende a minimização de dependências entre os componentes do sistema, tornando-os menos acoplados e, portanto, mais reutilizáveis e, além disso, melhorando na manutenibilidade e possibilitando maior flexibilidade.

export function Textarea({ value, onChange, placeholder, className, ...props }) {
  return (
    <textarea
      value={value}
      onChange={onChange}
      placeholder={placeholder}
      className={className}
      {...props}
    />
  );
}

No componente Textarea, as props são limitadas ao necessário, como value, onChange, placeholder e className. Além disso, há um spread operator (...props) para permitir extensibilidade sem forçar dependências desnecessárias. Isso está em conformidade com o ISP, pois minimiza dependências e evita que o componente dependa de props que não são usadas.

Conclusão

A componentização é um dos pilares para criar aplicações robustas, manutenáveis e compreensíveis. Ao dividir o projeto em pequenas partes independentes, cada uma com uma responsabilidade clara e bem definida, estamos aplicando os princípios SOLID na prática, garantindo que cada componente tenha uma “responsabilidade única” (SRP), seja “aberto para extensão e fechado para modificação” (OCP), e dependa de abstrações ao invés de implementações concretas (DIP).

O Princípio de Substituição de Liskov (LSP) nos ajuda a garantir que os componentes sejam intercambiáveis sem quebrar a aplicação, garantindo que qualquer componente derivado possa ser utilizado no lugar do componente base, ou seja, o componente que serve como modelo ou ponto de partida para outros derivados, garantindo que o comportamento do sistema se mantenha consistente. Já o Princípio de Segregação de Interface (ISP) assegura que os componentes não dependam de props desnecessárias, reduzindo o acoplamento. O Princípio de Inversão de Dependência (DIP) nos guia para que os componentes dependam de abstrações, não de implementações concretas, aumentando a flexibilidade e facilitando a manutenção e teste do sistema.

Componentizar é aplicar SOLID de forma que cada parte do sistema possa evoluir independentemente, mantendo a simplicidade e evitando a "patternite" — que é o uso forçado de padrões, complicando o código ao ponto de apenas o autor compreendê-lo. Componentização bem feita, junto aos princípios SOLID, torna o sistema não só mais robusto, como também previsível, legível, flexível, fácil de manter e de testar.

Bibliografia

Documentação: https://pt-br.react.dev/blog/2023/03/16/introducing-react-dev
Rocketseat: https://blog.rocketseat.com.br/react-do-zero-componentizacao-propriedades-e-estado/
Repositório GitHub: https://github.com/Safnaj/React-SOLID-Principles/tree/main/src/principles/LSP

Patterns de Renderização e Tecnologias do React: Performance e UX Otimizadas

Vânia Gomes — Thu, 22 Aug 2024 19:18:00 +0000

Introdução

O desenvolvimento de interfaces de usuário modernas exige uma combinação precisa de performance, eficiência e uma experiência fluida para o usuário final. O React, um dos frameworks mais populares e versáteis da atualidade, não apenas atende a essas demandas, mas as supera com uma série de técnicas e padrões de renderização avançados. Neste texto, exploraremos como o React utiliza esses padrões e recursos para criar interfaces ágeis e eficazes, reafirmando sua posição como uma escolha dominante no desenvolvimento Front-end

Conhecendo os Padrões de Renderização

No Client-Side Rendering (CSR), a renderização inicial pode parecer lenta, já que o servidor entrega apenas um contêiner HTML básico. Porém, assim que o JavaScript é carregado, a navegação e as atualizações subsequentes tornam-se rápidas, pois apenas os dados necessários são buscados e a página é atualizada dinamicamente.

Por outro lado, no Server-Side Rendering (SSR), o HTML completo da página é gerado no servidor a cada solicitação, incluindo dados de APIs ou bancos de dados. Utilizando a função assíncrona getServerSideProps, o SSR entrega o HTML já pronto para o navegador, permitindo uma visualização inicial antes do carregamento do JavaScript. Embora o SSR melhore a performance inicial e a indexação por mecanismos de busca, ele pode aumentar o tempo de resposta inicial (TTFB) caso o servidor tenha um alto volume de requisições.

A Static Site Generation (SSG) resolve esse problema ao entregar HTML pré-renderizado durante a construção do site. Esses arquivos HTML estáticos são armazenados em servidores ou CDNs, o que resulta em um TTFB mais rápido e melhora o desempenho, especialmente no FCP (First Contentful Paint) e TTI (Time to Interactive). O SSG é ideal para conteúdo estático, mas não é a melhor escolha para conteúdo dinâmico ou frequentemente atualizado.

Para minimizar essas limitações, o Incremental Static Generation (iSSG) foi introduzido. Ele permite a atualização de páginas existentes e a adição de novas em segundo plano, sem a necessidade de reconstruir todo o site. Isso facilita a escalabilidade para grandes volumes de dados e mudanças frequentes, mantendo a eficiência e a velocidade do SSG.

Cada padrão de renderização é ideal para diferentes contextos:

• Client-Side Rendering (CSR): Excelente para aplicações web interativas, como Single Page Applications (SPAs). Embora o carregamento inicial possa ser mais lento, a navegação rápida e a atualização dinâmica de dados fazem com que ele seja a escolha perfeita para interfaces altamente responsivas.

• Server-Side Rendering (SSR): Mais adequado para sites que precisam exibir conteúdo completo rapidamente. Ele permite uma visualização inicial mais ágil e melhor indexação por mecanismos de busca, tornando-o ideal para sites que priorizam SEO e desempenho inicial.

• Static Site Generation (SSG): Ideal para sites com conteúdo estático, como portfólios. A entrega rápida e eficiente do conteúdo pré-gerado melhora significativamente o desempenho, garantindo uma experiência de usuário fluida e rápida.

• Incremental Static Generation (iSSG): Combina os benefícios do SSG com a flexibilidade de atualizações em segundo plano. Isso oferece uma solução eficaz para sites que precisam lidar com atualizações frequentes e grandes volumes de dados, sem a necessidade de reconstruir o site inteiro.

Recursos do React

Para entender por que o React renderiza interfaces de usuário de maneira rápida e eficiente, vamos explorar alguns dos recursos que tornam esse framework tão poderoso:

Virtual DOM:
O Virtual DOM é uma representação leve da interface de usuário, mantida na memória pelo React. Quando o estado de um componente muda, o React atualiza apenas as partes da interface que realmente foram alteradas, em vez de re-renderizar a página inteira. Essa abordagem, conhecida como algoritmo de reconciliação, minimiza as operações no DOM real, resultando em uma experiência de usuário mais rápida e fluida.
Componentização:
O React permite que a interface seja dividida em componentes modulares, facilitando o gerenciamento e a reutilização de código. Componentes específicos podem ser atualizados independentemente, reduzindo a quantidade de código executado durante uma atualização e melhorando o desempenho.
Asincronismo com Hooks:
O hook useEffect permite a execução de código de forma assíncrona após a renderização, evitando bloqueios na interface. Além disso, os hooks useMemo e useCallback ajudam a memorizar valores e funções, evitando cálculos desnecessários durante renderizações repetidas.
Otimização do Motor JavaScript:
Motores JavaScript, como o V8 usado no Chrome, são altamente otimizados para executar código rapidamente. No React, essa otimização permite que a manipulação do Virtual DOM e a renderização ocorram de forma eficiente, garantindo uma experiência de usuário mais ágil.
Single-Page Application (SPA):
O React é frequentemente usado para criar SPAs, onde a navegação entre páginas ocorre sem recarregamento completo da página, proporcionando uma experiência de usuário muito mais rápida e suave.

Integração dos Padrões de Renderização no Ecossistema React

Após explorar os recursos poderosos do React, é fundamental entender como ele integra padrões de renderização para otimizar ainda mais a criação de interfaces rápidas e eficazes. Utilizando o Virtual DOM no CSR, gerando HTML completo com SSR, ou combinando a velocidade do SSG com a flexibilidade do iSSG, o React proporciona soluções ideais para diversos contextos e necessidades.

• Client-Side Rendering (CSR):
No CSR, o React utiliza o Virtual DOM para atualizar apenas as partes da interface que mudaram, tornando a navegação e as atualizações rápidas após o carregamento inicial. Essa abordagem é ideal para aplicações interativas, onde a experiência do usuário depende de uma interface dinâmica e responsiva.

• Server-Side Rendering (SSR):
O React pode ser usado com SSR para gerar HTML completo no servidor antes de enviá-lo ao navegador. Isso melhora o tempo de carregamento inicial e a indexação por mecanismos de busca, sendo útil para sites onde a performance inicial e a visibilidade nos motores de busca são prioridades.

• Static Site Generation (SSG) e Incremental Static Generation (iSSG):
Através de frameworks como Next.js, o React suporta SSG e iSSG, permitindo a geração rápida de páginas estáticas enquanto lida eficientemente com atualizações em segundo plano. Isso combina a velocidade de entrega do conteúdo estático com a flexibilidade de atualizações dinâmicas.

Conclusão

Se, mesmo após conhecer todos esses benefícios, você ainda não está convencido de que vale a pena investir seu tempo e energia para dominar o React, considere o seguinte: o surgimento de tecnologias poderosas como Next.js e React Native reflete a constante evolução deste framework. Além disso, o domínio do React não apenas abre portas para vastas oportunidades de trabalho, mas também posiciona você como um desenvolvedor de ponta em um mercado competitivo. A comunidade ao redor do React é vibrante e ativa, sempre pronta para oferecer suporte e ajudá-lo a superar qualquer desafio. Eu já decidi aprofundar meus estudos nos padrões de renderização e me dedicar a esse framework incrível. E você? Como tem sido sua experiência com o React? Compartilhe nos comentários!

Bibliografia

Rendering Patterns: https://www.patterns.dev/react/react-server-components
Building Your Application: https://nextjs.org/docs/pages/building-your-application

Desbravando TypeScript com a Magia da Terra Média

Vânia Gomes — Wed, 14 Aug 2024 13:14:26 +0000

Um passo essencial para se aprofundar em desenvolvimento Front-end é aprender TypeScript. Esse superconjunto do JavScript oferece uma experiência mais robusta ao trabalhar com tipos e orientação a objetos, e pode ser integrado a diferentes frameworks para alcançar resultados poderosos.

Neste artigo, você explorará conceitos avançados de TypeScript, como generics, enumerations, decorators, e interfaces, descobrirá as vantagens da tipagem estática e a adotar as melhores práticas para utilizar os recursos do TypeScript. Ao seguir essa trilha de aprendizado, você avançará no paradigma da Orientação a Objetos!

Tipos em TypeScript

Pense nos tipos em TypeScript como as raças da Terra Média. Cada raça tem suas características únicas e habilidades especiais. No TypeScript, você define a "raça" das suas variáveis, garantindo que o compilador saiba exatamente como elas devem se comportar. Isso impede, por exemplo, que você tente usar a força bruta de um anão para lançar feitiços, ou que um elfo tente lutar com o cajado de Saruman.

Vamos ver isso em ação:

interface Mago {
  nome: string;
  nivel: number;
  lancarFeitico: (feitico: string) => string;
}

const gandalf: Mago = {
  nome: "Gandalf",
  nivel: 20,
  lancarFeitico: (feitico: string) => {
    return `Lançando ${feitico}...`;
  }
};

Nesse exemplo, nome, nivel e lancarFeitico são as propriedades de Gandalf, nosso personagem, cada um com sua "raça" ou tipo definido: string, number, e function. Assim como não esperaríamos que Gandalf empunhasse uma espada como um guerreiro, o TypeScript não permitirá que você atribua um number a uma string, mantendo seu código livre de inconsistências, como se fossem orcs nas Montanhas Sombrias.

Generics

Generics em TypeScript são como uma capa mágica que pode se ajustar a qualquer personagem na Terra Média, oferecendo proteção a todos, independentemente de quem a veste. Imagine que você tem uma função que pode ser usada por hobbits, elfos ou anões, e ela sempre oferece uma proteção especial para quem a utiliza.

function usarPoder<T>(portador: T): T {
    console.log(`${portador} usou o Anel de Poder!`);
    return portador;
}

let frodo = usarPoder<string>("Frodo");
let legolas = usarPoder<string>("Legolas");

Essa função genérica permite que qualquer personagem use o poder do Anel, retornando o personagem que o utilizou. Generics tornam seu código mais flexível e reutilizável, assim como a capa mágica que se adapta a qualquer portador, sem a necessidade de criar uma capa específica para cada personagem.

O uso do na definição da função usarPoder(portador: T): T é o que caracteriza o recurso Generics em TypeScript. O T é um parâmetro de tipo que representa um tipo genérico, permitindo que a função usarPoder trabalhe com qualquer tipo que seja especificado no momento da chamada da função.

Essa função genérica permite que qualquer personagem use o poder do Anel, retornando o personagem que o utilizou. Generics tornam seu código flexível, como uma capa mágica que se adapta a qualquer portador, eliminando a necessidade de criar uma capa específica para cada personagem.

A grande vantagem de usar Generics é a simplicidade: com uma única função, você pode lidar com diferentes tipos de dados, mantendo a segurança e a clareza do código, sem duplicações.

Enums

Enums em TypeScript são como as raças da Terra-média (hobbits, elfos, anões, etc.). Eles permitem que você escolha uma dessas raças como se estivesse selecionando uma classe em um jogo.

enum Raca {
    Hobbit = "Hobbit",
    Elfo = "Elfo",
    Anao = "Anão",
    Humano = "Humano"
}

let personagem: Raca = Raca.Hobbit;
console.log(`Você escolheu a raça: ${personagem}`);

Aqui, Raca é um Enum que define as opções de raças na Terra-média. Ao escolher Raca.Hobbit, você seleciona a raça de hobbits, garantindo que apenas raças válidas sejam escolhidas, evitando erros no código.

O uso da palavra-chave enum seguida da definição de Raca é o que caracteriza o recurso Enum em TypeScript. Isso cria um conjunto de opções nomeadas, que pode ser utilizado de forma segura e legível.

O maior benefício de usar Enums é que eles fornecem uma maneira clara e segura de trabalhar com conjuntos de valores fixos, como as raças na Terra-média. Isso evita erros, já que o compilador garante que apenas valores permitidos sejam usados, tornando o código mais robusto e fácil de entender.

Decorators

Decorators em TypeScript são como o escudo mágico dado por Galadriel. Esse escudo entra em ação automaticamente toda vez que Frodo enfrenta um orc, garantindo sua proteção.

function EscudoMagico(target: any, propertyKey: string) {
    console.log(`${propertyKey} recebeu um escudo mágico!`);
}

class Frodo {
    @EscudoMagico
    enfrentarOrc(): void {
        console.log("Frodo enfrentou o orc!");
    }
}

let frodo = new Frodo();
frodo.enfrentarOrc();

Aqui, @EscudoMagico é um decorator que adiciona uma proteção especial ao método enfrentarOrc. Toda vez que Frodo usa esse método, o escudo mágico é ativado, garantindo que ele esteja sempre protegido.

O símbolo @ seguido do nome da função (@EscudoMagico) caracteriza o recurso de Decorators em TypeScript. Decorators são usados para modificar ou adicionar funcionalidades a classes e métodos de maneira elegante e declarativa.

O diferencial mais significativo ao usar Decorators é que eles permitem adicionar comportamento adicional a classes ou métodos sem alterar diretamente o código original. Isso torna o código mais modular e fácil de manter, ao mesmo tempo em que proporciona uma maneira clara e organizada de aplicar funcionalidades extras, como o escudo mágico que protege Frodo.

Lembre-se de usar estes artefatos do TypeScript de forma assertiva:

Interfaces devem ser usadas para definir tipos coerentes e relacionados.
Decorators devem ser usados para adicionar comportamento sem alterar o comportamento esperado dos métodos ou classes.
Enums são para valores constantes e não devem ser usados para dados que podem mudar frequentemente.
Generics devem ser aplicados quando há uma necessidade clara de flexibilidade de tipo, e o código deve ser adequado a essa versatilidade.

Conclusão

Em suma, TypeScript oferece um conjunto robusto de funcionalidades que aprimoram significativamente a experiência de desenvolvimento em comparação ao JavaScript puro. Por trazer uma camada ao JS, possibilita um feedback mais ágil no desenvolvimento e na prevenção de bugs que poderiam ser identificados apenas em tempo de execução, melhorando assim a legibilidade e a manutenibilidade do código. Assim como um bom elmo que protege o elfo, TypeScript protege o seu código e torna sua jornada de desenvolvimento mais segura e eficiente.

Bibliografia

A documentação: https://www.typescriptlang.org/docs/
Alura: https://www.alura.com.br/artigos/o-que-e-typescript