React é um dos frameworks front-end mais populares para JavaScript. Ao contrário de outros frameworks como o Angular, é muito sem opinião. Portanto, cabe a você decidir como deseja escrever ou estruturar seu código React.

Este artigo explora algumas práticas que você deve seguir para melhorar o desempenho do seu aplicativo React.

1. Usando componentes funcionais e ganchos em vez de classes

No React, você pode use classe ou componentes funcionais com ganchos. Você deve, no entanto, usar componentes funcionais e ganchos com mais frequência, pois eles resultam em um código mais conciso e legível em comparação com as classes.

Considere o seguinte componente de classe que exibe dados da API da NASA.

classe NasaData estende React. Componente {
 construtor (props) {
 super (adereços);
 this.state = {
 dados: [],
 };
 }
 componentDidMount() {
 buscar(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 this.setState({
 dados: json,
 });
 });
 }
 render(){
 const { data } = this.state;





instagram viewer


 if (!data.length)
 Retorna (


 Buscando dados... 
{" "}



 );
 Retorna (
 <>
 Buscar dados usando o componente Class 
{" "}
 {data.map((item) => (
{título do item}

 ))}
 );
 }
}

O mesmo componente pode ser escrito usando ganchos.

const NasaData = () => {
 const [data, setdata] = useState (null);
 useEfeito(() => {
 buscar(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 setdata (json);
 });
 }, [dados]);
 Retorna (
 <>
 Buscar dados usando o componente Class 
{" "}
 {data.map((item) => (
{título do item}

 ))}
 );
};

Embora o bloco de código acima faça a mesma coisa que o componente de classe, é menos complexo, mínimo e fácil de entender, o que contribui para uma melhor experiência do desenvolvedor.

2. Evite usar o estado (se possível)

O estado React mantém o controle dos dados que, quando alterados, acionam o componente React para renderizar novamente. Ao criar aplicativos React, evite usar o estado o máximo possível, pois quanto mais estado você usa, mais dados você precisa acompanhar em seu aplicativo.

Uma maneira de minimizar o uso do estado é declará-lo apenas quando necessário. Por exemplo, se você estiver buscando dados do usuário de uma API, armazene todo o objeto do usuário no estado em vez de armazenar as propriedades individuais.

Em vez de fazer isso:

const [username, setusername] = useState('')
const [password, setpassword] = useState('')

Fazem isto:

const [usuário, setuser] = useState({})

Ao decidir sobre uma estrutura de projeto, vá para um centrado em componentes. Isso significa ter todos os arquivos relativos a um componente em uma pasta.

Se você estivesse criando um Barra de navegação componente, crie uma pasta chamada barra de navegação contendo o Barra de navegação componente em si, a folha de estilo e outros arquivos JavaSript e ativos usados ​​no componente.

Uma única pasta contendo todos os arquivos de um componente facilita a reutilização, o compartilhamento e a depuração. Se você precisar ver como um componente funciona, você só precisa abrir uma única pasta.

4. Evite usar índices como adereços de chave

O React usa chaves para identificar exclusivamente itens em um array. Com as chaves, o React pode identificar qual item foi alterado, adicionado ou removido do array.

Na maioria das vezes, ao renderizar matrizes, você pode usar o índice como chave.

const Itens = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 Retorna (
 <>
 {arr.map((elem, índice) => {
{elem}
;
 })}
 );
};

Embora isso às vezes funcione, usar o índice como chave pode apresentar problemas, especialmente se a lista for alterada. Considere esta lista.

const arr = ["item1", "item2", "item3", "item4", "item5"];

Atualmente, o primeiro item da lista, “Item 1” está no índice zero, mas se você adicionou outro item no início da lista, o “Item 1” index mudaria para 1, o que altera o comportamento do seu array.

A solução é usar um valor exclusivo como índice para garantir que a identidade do item da lista seja mantida.

5. Opte por fragmentos em vez de divs sempre que possível

Os componentes do React precisam retornar o código envolto em uma única tag, geralmente um ou um fragmento React. Você deve optar por fragmentos sempre que possível.

Usando aumenta o tamanho do DOM, especialmente em projetos grandes, pois quanto mais tags ou nós DOM você tiver, mais memória seu site precisará e mais energia um navegador usará para carregar seu site. Isso leva a uma velocidade de página mais baixa e uma experiência do usuário potencialmente ruim.

Um exemplo de eliminação desnecessária tags não as está usando ao retornar um único elemento.

botão const = () => {
 Retorna Tela;
};

6. Siga as convenções de nomenclatura

Você deve sempre usar PascalCase ao nomear componentes para diferenciá-los de outros arquivos JSX não componentes. Por exemplo: Campo de texto, Menu de navegação, e Botão de Sucesso.

Use camelCase para funções declaradas dentro de componentes React como handleInput() ou showElement().

7. Evite códigos repetitivos

Se você perceber que está escrevendo código duplicado, converta-o em componentes que possam ser reutilizados.

Por exemplo, faz mais sentido criar um componente para seu menu de navegação em vez de escrever repetidamente o código em cada componente que requer um menu.

Essa é a vantagem de uma arquitetura baseada em componentes. Você pode dividir seu projeto em pequenos componentes que podem ser reutilizados em seu aplicativo.

8. Use a desestruturação de objetos para adereços

Em vez de passar o objeto props, use a desestruturação de objetos para passar o nome do prop. Isso descarta a necessidade de se referir ao objeto props toda vez que você precisar usá-lo.

Por exemplo, o seguinte é um componente que usa props como está.

Botão const = (props) => {
 Retorna {props.text};
};

Com a desestruturação de objetos, você se refere ao texto diretamente.

botão const = ({texto}) => {
 Retorna {texto};
};

9. Renderize arrays dinamicamente usando o mapa

Usar mapa() para renderizar dinamicamente blocos HTML repetidos. Por exemplo, você pode usar mapa() para renderizar uma lista de itens em Tag.

const Itens = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 Retorna (
 <>
 {arr.map((elem, índice) => {
{elem}
;
 })}
 );
 };

Para fins de comparação, aqui está como você pode renderizar a lista sem mapa(). Essa abordagem é muito repetitiva.

lista const = () => {
 Retorna (


Item 1

Item2

Item 3

Item 4

Item 5




 );
};

10. Escrever testes para cada componente React

Escreva testes para os componentes que você cria, pois reduz as possibilidades de erros. O teste garante que os componentes estejam se comportando conforme o esperado. Um dos frameworks de teste mais comuns para o React é o Jest, e ele fornece um ambiente onde você pode executar seus testes.

Embora o React seja um pouco flexível em termos de como você pode usá-lo, seguir práticas específicas ajudará você a aproveitar ao máximo sua experiência.

Ao seguir essas dicas, lembre-se de seu projeto e objetivos específicos; alguns serão mais relevantes em certos casos do que outros.

Como consumir APIs em React usando Fetch e Axios

Quer saber como usar APIs? Entender como consumir APIs no React é um elemento chave do uso da API.

Leia a seguir

Sobre o autor