DEV Community: Renan Moreira

Redux

Renan Moreira — Mon, 13 Nov 2023 20:07:11 +0000

A biblioteca Redux, desenvolvida em JavaScript, destina-se ao gerenciamento de estados em aplicações. Sua aplicabilidade estende-se a diversos frameworks e bibliotecas, como React, Angular, Vue.js, Node.js, React Native, e abrange tanto o uso de JavaScript quanto TypeScript em ambientes de desenvolvimento em geral.

Notion: Como usar o redux

SOLID in React- OCP - Open-Closed Principle

Renan Moreira — Sat, 29 Apr 2023 01:44:57 +0000

Embora tenha sido concebido para a programação orientada a objetos, os princípios do SOLID podem ser aplicados em outros contextos como em componentes React.

Este post aborda o "O" do S[O]LID
Criado com Next 13 + React 18
Codepen no final do post
A aplicação inicia com o SRP aplicado

OCP - Open-Closed Principle

O Open Closed Principle (Princípio Aberto/Fechado) preconiza que uma entidade de software (classe, módulo, função, etc.) deve estar aberta para extensão (ou seja, deve ser possível adicionar novos comportamentos ou funcionalidades sem modificar o código existente) e fechada para modificação (ou seja, o código existente não deve ser modificado para adicionar novos comportamentos ou funcionalidades).

Suponha que temos uma lista de usuários que podem ser exibidos em um componente em nossa aplicação. Inicialmente, exibimos apenas o primeiro nome e o gênero do usuário com um ícone ao lado do nome, sendo azul para usuários masculinos e vermelho para usuários femininos.

No contexto de componentes, o princípio Aberto/Fechado não está sendo aplicado ao código fornecido. Isso ocorre porque o componente ListUsersBefore precisa ser alterado se houver a necessidade de adicionar um filtro de usuários, componentes ou propriedades dentro dele. Isso viola o princípio, pois o componente deve estar aberto para extensão e fechado para modificação.

/**
 * ocp
 *  ListUsersBefore
 *    hooks
 *      useUsers
 *        index.ts
 *    index.tsx
 *    styles.ts
 */

Componente principal:

//ocp/ListUsersBefore/index.tsx

import { FaFemale, FaMale } from 'react-icons/fa';
import { useUsers } from './hooks/useUsers';
import { S } from './styles';

export const ListUsersBefore = () => {
  const { data, isLoading } = useUsers();

  return (
    <>
      {isLoading && <div>Loading...</div>}

      {data.map((user) => (
        <S.Div 
          gender={user.gender} 
          key={user.email}
        >
          {(user.gender === 'female' && <FaFemale />) || <FaMale />}
          <span>{user.name.first}</span>
        </S.Div>
      ))}
    </>
  );
};

Estilos do componente principal:

//ocp/ListUsersBefore/styles.ts

type StyledUserProps = {
  gender: 'male' | 'female';
};

export const S = {
  Div: styled.div<StyledUserProps>`
    color: ${(props) => (props.gender === 'male' ? 'blue' : 'red')};
    border: 1px solid;
    max-width: 200px;
    padding: 0.2rem;
    margin-bottom: 0.2rem;
    border-radius: 4px;
  `
};

Hook que fornece os dados:

//ocp/ListUsersBefore/hooks/useUsers/index.tsx

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

type User = {
  name: {
    first: string;
  };
  email: string;
  gender: 'male' | 'female';
};

type useUsersReponse = {
  data: User[];
  isLoading: true | false;
  error: null | string;
};

export const useUsers = (): useUsersReponse => {
  const [data, setData] = useState<User[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<null | string>(null);

  const handleFetch = async () => {
    setIsLoading(true);

    try {
      const url = `https://randomuser.me/api/?results=5`;
      const res = await axios.get(url);

      setError(null);
      setData(res.data.results);
    } catch (err) {
      setError('Error get Users!');
    }

    setIsLoading(false);
  };

  useEffect(() => {
    handleFetch();
  }, []);

  return {
    data,
    isLoading,
    error
  };
};

SOLID in React- SRP - Single Responsibility Principle

Renan Moreira — Tue, 25 Apr 2023 04:09:22 +0000

Embora tenha sido concebido para a programação orientada a objetos, os princípios do SOLID podem ser aplicados em outros contextos como em componentes React.

Este post aborda o "S" do [S]OLID
Criado com Next 13 + React 18
Codepen no final do post

SRP - Single Responsibility Principle

O Single Responsibility Principle (Princípio da Responsabilidade Única) é um dos cinco princípios do SOLID, que é uma abordagem para escrever código limpo, modular e escalável. O princípio SRP estabelece que uma classe ou módulo deve ter apenas uma razão para mudar, ou seja, deve ter apenas uma responsabilidade.

No código abaixo, o componente está lidando com a obtenção de dados da API, o gerenciamento do estado do componente e a estilização do componente. Isso torna o componente difícil de manter e entender, pois tem muitas responsabilidades.

/**
 * components
 *  examples
 *    solid
 *      srp
 *        ListUsersAfter
 *          index.tsx
 */

// srp/ListUsersAfter/index.tsx

'use client';

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

type User = {
  name: {
    first: string;
  };
  email: string;
  gender: 'male' | 'female';
};

type Data = {
  results: User[];
};

export const ListUsersBefore = () => {
  const [data, setData] = useState<Data>();
  const [isLoading, setIsLoading] = useState(false);

   const handleFetch = async () => {
    setIsLoading(true);
    const url = 'https://randomuser.me/api/?results=5';
    const res = await axios.get(url);
    setIsLoading(false);
    setData(res.data);
  };

  useEffect(() => {
    handleFetch();
  }, []);

  return (
    <>
      {isLoading && <div>Loading...</div>}

      {data?.results?.map((user) => (
        <div
          key={user.email}
          style={{
            color: user.gender === 'male' ? 'blue' : 'red',
            border: '1px solid',
            maxWidth: '200px',
            padding: '0.2rem',
            marginBottom: '0.2rem',
            borderRadius: '4px'
          }}
        >
          {user.name.first}
        </div>
      ))}
    </>
  );
};

Para resolver esse problema e aderir ao princípio SRP, podemos dividir o componente em vários componentes menores e mais focados em suas responsabilidades.

/**
 * components
 *  examples
 *    solid
 *      srp
 *        ListUsersAfter
 *          hooks
 *            useUsers
 *              index.ts
 *          index.tsx
 *          styles.ts
 */

O estilo que antes estava dentro do componente principal foi removido e isolado em outro componente.

//srp/ListUsersAfter/styles.ts
import styled from 'styled-components';

type StyledUserProps = {
  gender: 'male' | 'female';
};

export const S = {
  Div: styled.div<StyledUserProps>`
    color: ${(props) => (props.gender === 'male' ? 'blue' : 'red')};
    border: 1px solid;
    max-width: 200px;
    padding: 0.2rem;
    margin-bottom: 0.2rem;
    border-radius: 4px;
  `
};

Agora, o componente principal tem apenas a responsabilidade de renderizar a lista de usuários.

//srp/ListUsersAfter/index.tsx

import { useUsers } from './hooks/useUsers';
import { S } from './styles';

export const ListUsersAfter = () => {
  const { data, isLoading } = useUsers();

  return (
    <>
      {isLoading && <div>Loading...</div>}

      {data?.map((user) => (
        <S.Div gender={user.gender} key={user.email}>
          {user.name.first}
        </S.Div>
      ))}
    </>
  );
};

A responsabilidade de adquirir os dados foi isolada em um componente na pasta hooks. Além disso, houve melhorias nas tipagens, a aplicação da técnica debounceTime e o tratamento de erros, embora esta última técnica não faça parte do SOLID.

//srp/ListUsersAfter/hooks/useUsers/index.ts

import { sortObjects } from '@/app/utils/sortObjects';
import axios from 'axios';
import { useCallback, useEffect, useState } from 'react';

type User = {
  name: {
    first: string;
  };
  email: string;
  gender: 'male' | 'female';
};

export type useUsersProps = {
  debounceTime?: number;
  sortOrder?: 'asc' | 'desc';
  limit?: number;
};

type useUsersReponse = {
  data: User[];
  isLoading: true | false;
  error: null | string;
};

export const useUsers = ({
  debounceTime = 500,
  sortOrder = 'asc',
  limit = 5
}: useUsersProps = {}): useUsersReponse => {
  const [data, setData] = useState<User[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<null | string>(null);

  const handleFetch = useCallback(async () => {
    setIsLoading(true);

    try {
      const url = `https://randomuser.me/api/?results=${limit}`;
      const res = await axios.get(url);

      setData(sortObjects(res.data.results, 'name.first', sortOrder));
      setError(null);
    } catch (err) {
      setError('Error get Users!');
    }

    setIsLoading(false);
  }, [sortOrder, limit]);

  useEffect(() => {
    const timer = setTimeout(() => {
      handleFetch();
    }, debounceTime);

    return () => {
      clearTimeout(timer);
    };
  }, [debounceTime, handleFetch]);

  return {
    data,
    isLoading,
    error
  };
};

Devido à limitação da plataforma, todo o exemplo está contido em um único arquivo, sem a possibilidade de separação em pastas e arquivos distintos. Entretanto, ao longo do post, as responsabilidades serão abordadas em camadas distintas.

Formar de estilizar componentes em React

Renan Moreira — Mon, 17 Apr 2023 22:29:59 +0000

Em construção...

Estados em React

Renan Moreira — Mon, 17 Apr 2023 22:29:27 +0000

Em construção...

Propriedades em React

Renan Moreira — Mon, 17 Apr 2023 22:28:38 +0000

Em construção...

Componentes em React

Renan Moreira — Mon, 17 Apr 2023 22:28:04 +0000

Componentes

Componentes em React são como peças de construção que você usa para construir diferentes partes de uma casa.

Cada peça tem sua própria aparência e comportamento e pode ser reutilizada em diferentes partes da construção.

Personalizar componentes

Pense em componentes como planos de construção que usam diferentes materiais para construir uma casa.

Os componentes também usam "props" para criar diferentes aparências e comportamentos na tela, assim como diferentes materiais podem ser usados para personalizar uma casa.

Interfaces complexas

Imagine que você está construindo uma casa com diferentes peças, como paredes, telhados e portas.

Você pode combinar e encaixar essas peças para criar uma casa mais complexa e interativa.

Da mesma forma, os componentes em React podem ser combinados e aninhados para criar interfaces mais complexas e interativas na web.

Atualização dinâmica

Cada componente tem seu próprio estado interno e métodos para atualizá-lo, permitindo uma mudança dinâmica na aparência ou comportamento do componente na tela, em resposta às ações do usuário ou mudanças nos dados.

É como construir uma casa que pode ser modificada ou personalizada para atender às suas necessidades.

Exemplo

A aplicação construída atente todos os conceitos abordados:

Componentes são criados para construir diferentes partes da interface, como Menu, Content e Link. Cada componente tem sua própria aparência e comportamento e pode ser reutilizado em diferentes partes da interface.
Além disso, os componentes usam props para personalizar o comportamento na tela.
A interface complexa, com diferentes componentes combinados e aninhados para criar uma experiência de usuário mais interativa.
Componentes com props, estado e métodos para atualizá-lo, permitindo uma mudança dinâmica na aparência ou comportamento do componente na tela.

React sem State Derivation (codepen.io)

Tópicos relacionados:

Propriedades em React

Estados em React

Formas de estilizar componentes em React

Quando não utilizar estados no React

Renan Moreira — Mon, 17 Apr 2023 15:40:07 +0000

Em determinados contextos, é importante evitar a renderização desnecessária de componentes, e um exemplo disso é uma tela de login.

Para evitar essas renderizações desnecessárias, podemos utilizar a referência (ref) em React.

Antes

Sempre que os estados do componente são atualizados, a função de renderização é executada novamente, o que faz com que a interface do usuário seja atualizada.

Quando não utilizar estados no React - antes (codepen.io)

Nesse caso, os valores dos campos são capturados utilizando a funcionalidade "ref", mas somente quando o formulário é submetido.

Como nenhuma atualização de estado é realizada durante esse processo, o componente é renderizado somente uma vez.

Quando não utilizar estados no React - antes (codepen.io)

React State Derivation

Renan Moreira — Mon, 17 Apr 2023 15:06:56 +0000

State Derivation é uma técnica que envolve a criação de novos valores de estado com base em um estado atual, em vez de armazenar novos valores diretamente no estado do componente.

O uso de State Derivation pode ajudar a manter seu código organizado, simplificar a lógica de negócios e melhorar a experiência do usuário, reduzindo o tempo de resposta do aplicativo.

Sem State Derivation

O componente Login utiliza o hook useState para controlar o estado dos campos do formulário e o hook useEffect para monitorar alterações em firstName e lastNamee atualizar fullName.
Como consequência da atualização do estado, a função de renderização do componente é executada novamente, fazendo com que a interface do usuário seja atualizada. Portanto, sempre que firstName, lastName ou fullName são atualizados, o componente é renderizado novamente.

React sem State Derivation (codepen.io)

Com State Derivation

O componente Login utiliza o hook useState para controlar os estados de firstName e lastName. Em vez de utilizar um segundo hook para atualizar fullName, o valor é calculado diretamente dentro da função de renderização, sem o uso de um hook adicional.

Dessa forma, é possível reduzir a quantidade de renderizações do componente, uma vez que a atualização de fullName não provoca uma nova renderização. Essa abordagem é possível devido ao fato de que fullName é um valor calculado a partir de firstName e lastName, não necessitando de um estado separado para ser armazenado.

React com State Derivation (codepen.io)

Em certos contextos, é possível diminuir ainda mais a renderização dos componentes. Confira o seguinte artigo: "Quando não utilizar estados no React".

ESLint e Prettier

Renan Moreira — Tue, 20 Dec 2022 14:31:54 +0000

Em desenvolvimento...