Otimizando solicitações de servidor com React Hooks
Introdução
Como desenvolvedor React, você está cansado de lidar com solicitações de servidor mal gerenciadas? Não procure mais; React Hooks é um recurso poderoso da biblioteca React que permite aos desenvolvedores usar o estado e outros recursos do React em componentes funcionais e pode ajudar a otimizar as solicitações do servidor e levar o desempenho do seu aplicativo da web para o próximo nível.
Você pode estar pensando: “Qual é o problema das solicitações do servidor? Por que eles são importantes? ” Bem, deixe-me dizer: as solicitações do servidor desempenham um papel crucial na determinação da experiência do usuário. Solicitações de servidor mal gerenciadas podem levar a tempos de carregamento lentos, baixo desempenho e uma experiência de usuário frustrante. React Hooks fornece uma maneira de gerenciar solicitações de servidor de maneira eficiente e organizada, resultando em tempos de carregamento mais rápidos, melhor desempenho e melhor experiência do usuário.
Este tutorial irá guiá-lo sobre como usar React Hooks para melhorar o desempenho das solicitações do servidor, gerenciar as solicitações do servidor com mais eficiência e ajudá-lo a criar aplicativos da web mais otimizados.
Ao final deste tutorial, você terá um conhecimento sólido de como usar React Hooks para otimizar solicitações de servidor e será capaz de implementar essas técnicas em seus projetos para melhorar o desempenho e a experiência do usuário de suas aplicações web.
Pré-requisitos:
Para acompanhar este tutorial, você deve ter:
- Compreensão de JavaScript e configuração de um aplicativo React do zero.
- Familiaridade com React Hooks.
- Conhecimento de como fazer solicitações de servidor em JavaScript.
- Um ambiente de desenvolvimento funcional.
- Um editor de código.
Além disso, seria benéfico ter alguma experiência trabalhando com APIs e entendendo os princípios RESTful.
Se você é novo na otimização de solicitações de servidor, não se preocupe – este tutorial foi feito sob medida para desenvolvedores de todos os níveis de experiência. Pode exigir alguma pesquisa e experimentação extra por conta própria, se você ainda não estiver familiarizado com os conceitos. Mas não se preocupe; com um pouco de paciência e prática, você será capaz de dominar a arte de otimizar as solicitações do servidor rapidamente! Então, vamos começar e melhorar o desempenho do seu aplicativo React.
Configurando um novo projeto React
Configurar um novo projeto React pode ser uma tarefa difícil para desenvolvedores iniciantes, mas com a ajuda da ferramenta Create React App (CRA), nunca foi tão fácil. CRA é uma ferramenta popular de interface de linha de comando que automatiza o processo de configuração de um novo projeto React, fornecendo um ambiente de desenvolvimento otimizado para a construção de aplicativos React. Você pode seguir este tutorial para aprender como configurar um aplicativo React do zero.
TL;TR
Para criar um projeto React, você precisará ter Node.js e npm instalados em seu computador. Se ainda não os possui, você pode baixá-los no site oficial do Node.js. Depois de instalar essas ferramentas, abra seu terminal ou prompt de comando no diretório onde deseja que o aplicativo seja criado, use o seguinte comando para criar um novo projeto React:
npx create-react-app digital-ocean-tutorial
Se o aplicativo for criado com sucesso, a seguinte saída será exibida:
...
Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd digital-ocean-tutorial
npm start
Happy hacking!
Isso criará um novo diretório com o mesmo nome do seu projeto, contendo todos os arquivos necessários para o seu novo projeto React.
Assim que o processo de configuração for concluído, navegue até o novo diretório do projeto React executando o seguinte comando:
cd digital-ocean-tutorial
E então execute o seguinte comando para iniciar o servidor de desenvolvimento:
npm start
Se tudo for feito corretamente, o servidor deverá começar a funcionar e a seguinte saída será exibida:
Compiled successfully!
You can now view digital-ocean-tutorial in the browser
http://localhost:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
Isso iniciará seu novo projeto React em seu navegador padrão. Agora você deverá ver uma mensagem “Bem-vindo ao React”, o que significa que seu projeto foi configurado corretamente e está pronto para você começar a construir seu próximo ótimo aplicativo!
Com o CRA, você poderá se concentrar em escrever código, sem ter que se preocupar em instalar e configurar o ambiente de desenvolvimento.
Agora que você tem seu projeto React instalado e funcionando, vamos ver várias maneiras de otimizar as solicitações do servidor usando ganchos React.
Sincronize componentes com o gancho UseEffect
O gancho useEffect no React permite que os desenvolvedores sincronizem um componente com um sistema externo, como um servidor, manipulando efeitos colaterais, como busca de dados, de uma forma eficiente e fácil de entender. Um dos casos de uso mais comuns para o gancho useEffect é fazer solicitações ao servidor e atualizar o estado do componente.
Uma maneira de usar o gancho useEffect para solicitações do servidor é chamar uma função que executa a solicitação dentro do gancho useEffect. A função deve usar a API Fetch ou uma biblioteca como Axios para realizar a solicitação e, em seguida, atualizar o estado do componente com os dados de resposta usando o gancho setState.
Vejamos um exemplo de como usar o gancho useEffect para buscar dados de uma API de espaço reservado JSON e atualizar o estado do componente. Acesse o arquivo app.js, dentro da pasta src do seu projeto, exclua o código padrão e substitua-o pelo trecho de código abaixo:
import React, { useEffect, useState } from 'react';
function MyComponent() {
const [data, setData] = useState([]);
useEffect(() => {
async function fetchData() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
setData(data);
}
fetchData();
}, []);
return (
<div>
{data.map((item) => (
<div key={item.id}>
<h2>- {item.title}</h2>
<p>{item.body}</p>
</div>
))}
</div>
);
}
export default MyComponent
No exemplo acima, o gancho useEffect é chamado com um array de dependência vazio, o que significa que ele só será executado na renderização inicial do componente. O estado do componente é inicializado com um array vazio, e a função fetchData é chamada dentro do gancho useEffect para realizar a solicitação do servidor e atualizar o estado com os dados de resposta.
Se você atualizar o navegador ou o aplicativo, deverá conseguir ver o resultado da solicitação feita no exemplo de código acima, conforme mostrado na imagem abaixo:
É importante observar que re-renderizações desnecessárias podem causar problemas de desempenho, portanto, é uma prática recomendada minimizar o número de re-renderizações causadas pelo gancho useEffect. Uma maneira de fazer isso é incluir apenas os adereços e variáveis de estado usadas pelo gancho na matriz de dependências.
O tratamento adequado dos erros ao fazer solicitações ao servidor também é importante para evitar a quebra do componente. O tratamento de erros pode ser feito adicionando um bloco try-catch dentro da função fetchData e usando o gancho setError para atualizar o estado do componente com uma mensagem de erro. Dessa forma, o aplicativo pode exibir a mensagem de erro ao usuário caso algo dê errado.
Seguindo as práticas recomendadas, você pode fazer solicitações de servidor em um componente React com confiança e criar uma melhor experiência do usuário.
Otimizando o desempenho da solicitação do servidor com o gancho useMemo
O gancho useMemo no React é uma ferramenta de otimização de desempenho que permite aos desenvolvedores memorizar dados armazenando o resultado da computação para que sejam reutilizáveis sem a necessidade de repetir o processo. Isso pode ser particularmente útil ao trabalhar com solicitações de servidor, pois pode ajudar a evitar novas renderizações desnecessárias e melhorar o desempenho do componente.
Uma maneira de usar o gancho useMemo em um contexto de solicitação do servidor é memorizar os dados retornados do servidor e usá-los para atualizar o estado do componente. Isso pode ser feito chamando o gancho useMemo dentro do gancho useEffect e passando os dados do servidor como o primeiro argumento e um array de dependência como o segundo argumento. A matriz de dependência deve incluir quaisquer adereços ou variáveis de estado usadas para calcular os dados memorizados.
Para tentar este método usando o gancho useMemo para memorizar dados de uma API de espaço reservado JSON e atualizar o estado do componente, substitua o código em app.js pelo snippet de código abaixo:
import { useEffect, useState, useMemo } from 'react';
function MyComponent({ postId }) {
const [data, setData] = useState({});
useEffect(() => {
async function fetchData() {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);
const data = await response.json();
setData(data);
}
fetchData();
}, [postId]);
const title = useMemo(() => data.title, [data]);
return (
<div>
<h2>{title}</h2>
</div>
);
}
export default MyComponent
No exemplo acima, o gancho useEffect é chamado com postId como array de dependência, o que significa que ele será executado sempre que a propriedade postId for alterada. O estado do componente é inicializado com um objeto vazio e então a função fetchData é chamada dentro do gancho useEffect para executar a solicitação do servidor e atualizar o estado com os dados de resposta. Dentro do componente, usamos o gancho useMemo para memorizar o título, passando data.title como o primeiro argumento e [data] como o segundo argumento para que sempre que os dados forem alterados, o título seja atualizado.
Abaixo está o resultado da solicitação no exemplo de código acima:
Observe que useMemo nem sempre é necessário e só deve ser usado quando o componente depende de alguns adereços ou estados que podem mudar com frequência e o cálculo é caro. Usar useMemo de forma inadequada pode causar vazamentos de memória e outros problemas de desempenho.
Gerenciando o estado da solicitação do servidor com o gancho useReducer
O gancho useReducer no React é semelhante ao gancho useState, mas permite um gerenciamento de estado mais complexo e previsível. Em vez de atualizar o estado diretamente, useReducer permite despachar ações que descrevem a atualização do estado e uma função redutora que atualiza o estado com base na ação de despacho.
Um benefício de usar o gancho useReducer para gerenciamento de solicitações do servidor é a melhor separação de interesses. Em vez de ter a lógica para lidar com as solicitações do servidor espalhadas por todo o componente, ela pode ser encapsulada na função redutora, tornando o código do componente mais fácil de entender e manter.
Para tentar este método usando o gancho useReducer para memorizar dados de uma API de espaço reservado JSON e atualizar o estado do componente, substitua o código em app.js pelo snippet de código abaixo:
import { useReducer } from 'react';
const initialState = { data: [], loading: false, error: '' };
const reducer = (state, action) => {
switch (action.type) {
case 'FETCH_DATA_REQUEST':
return { ...state, loading: true };
case 'FETCH_DATA_SUCCESS':
return { ...state, data: action.payload, loading: false };
case 'FETCH_DATA_FAILURE':
return { ...state, error: action.payload, loading: false };
default:
return state;
}
};
function MyComponent() {
const [state, dispatch] = useReducer(reducer, initialState);
const fetchData = async () => {
dispatch({ type: 'FETCH_DATA_REQUEST' });
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
} catch (error) {
dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
}
};
return (
<div>
{state.loading ? (
<p>Loading...</p>
) : state.error ? (
<p>{state.error}</p>
) :
<div>
{state.data.map((item) => (
<div key={item.id}>
<h2>{item.title}</h2>
<p>{item.body}</p>
</div>
))}
</div>
)}
<button onClick={fetchData}>Fetch Data</button>
</div>
);
}
export default MyComponent
No trecho de código apresentado, o gancho useReducer é invocado com a função redutora e o estado inicial passado como argumentos. O estado do componente é inicializado com um array vazio como dados, uma variável de carregamento definida como falsa e uma variável de mensagem de erro vazia. Ao clicar no botão “Fetch Data” é executada a função fetchData, que despacha ações em resposta ao status da solicitação, que pode ser sucesso ou falha.
Abaixo está o resultado da solicitação feita no exemplo de código acima:
Além disso, o gancho useReducer permite um gerenciamento mais eficiente de estados complexos. Ao utilizar ações e redutores para atualizar o estado, fica mais simples lidar com o impacto de diversas ações em diferentes partes do estado, facilitando a adição de novos recursos e a solução de problemas no aplicativo.
Você pode encontrar o código-fonte de um aplicativo funcional que usa os métodos discutidos acima neste repositório GitHub.
Conclusão
Em resumo, este tutorial abordou os fundamentos da otimização de solicitações de servidor com React Hooks. React Hooks é um recurso poderoso da biblioteca React que permite aos desenvolvedores usar estado e outros recursos do React em componentes funcionais. Com os ganchos useEffect, useMemo e useReducer, você pode gerenciar e otimizar facilmente as solicitações do servidor, resultando em tempos de carregamento mais rápidos, melhor desempenho e um melhor experiência do usuário para seus usuários. Você pode melhorar o desempenho e a experiência do usuário em seus aplicativos Web seguindo as técnicas demonstradas neste tutorial.
Agora é sua vez de experimentar essas técnicas em seus projetos. Na próxima etapa, você pode explorar tópicos mais avançados, como paginação e cache. Lembre-se de que React Hooks é uma tecnologia em constante evolução, portanto, mantenha-se atualizado com as atualizações e práticas recomendadas mais recentes para continuar a otimizar as solicitações do servidor.