Indexação de dados para aplicações frontend

A eficiência no tratamento de dados de APIs é um fator crítico para garantir uma experiência fluida ao usuário. À medida que os conjuntos de dados crescem, operações aparentemente simples, como buscar um item específico em uma lista, podem se tornar inimigos de performance. Nesse artigo, vou mostrar algumas formas de lidar com dados de API que podem transformar buscas lentas em acessos instantâneos. Pega um cafezinho e vamos nessa! ☕ Sumário O problema dos arrays A Solução: Indexação de Dados da API Técnicas ninja de indexação Performance na prática Um extra: Objetos vs Maps Conclusão Quem aí lembra do Gato A Jato? O problema dos arrays Normalmente, uma API entrega dados assim: const produtos = [ { id: 1, nome: "Smartphone Ultra Mega", categoria: "eletronicos", preco: 1599.99 }, { id: 2, nome: "Sofá Confortex", categoria: "moveis", preco: 899.50 }, { id: 3, nome: "Smart TV 55pol", categoria: "eletronicos", preco: 2499.99 }, // ... e mais uns 500 produtos que sua aplicação precisa gerenciar ]; Quando você precisa acessar esses dados, você acaba recorrendo a métodos como find() ou filter(): // Todo mundo já escreveu isso um dia function encontrarProdutoPorId(id) { return produtos.find(produto => produto.id === id); } function filtrarPorCategoria(categoria) { return produtos.filter(produto => produto.categoria === categoria); } O problema é que esses métodos fazem uma busca linear, o que significa que o tempo de execução aumenta linearmente com o tamanho do array. Ou seja: quanto mais produtos você tem, mais tempo demora. E isso ocorre porque esses métodos percorrem cada item da lista até encontrar o que você quer (busca de performance O(n)). Pra gente ter uma ideia geral sobre a performance de um algoritmo, é só a gente dar uma olhada no gráfico abaixo pra saber onde cada notação big-O se encontra. Aqui, vamos focar em performances O(n) e O(1). Fonte: Complexidade e performance de um algoritmo, por Ivan Queiroz Observação: A performance que levaremos em conta nesse artigo é a de acesso aos dados indexados e não a de criação das indexações, já que, para o usuário final, o acesso aos dados é o que vai fazer a diferença. A Solução: Indexação de Dados da API Indexar significa criar uma estrutura de dados onde o acesso é instantâneo, como um índice de livro. No JavaScript, podemos fazer isso facilmente com objetos ou Maps. // Transformando nosso array em um objeto indexado // Com reduce: const produtosPorId = produtos.reduce((acc, produto) => { acc[produto.id] = produto; return acc; }, {}); // OU com Object.fromEntries: const produtosPorId = Object.fromEntries( produtos.map(produto => [produto.id, produto]) ); // Agora o acesso é instantâneo: performance O(1) function encontrarProdutoPorId(id) { return produtosPorId[id]; } /* Exemplo de retorno de produtosPorId: { 1: { id: 1, nome: "Smartphone Ultra Mega", categoria: "eletronicos", preco: 1599.99 }, etc... } */ Se você quiser, também pode usar a classe Map para mais flexibilidade, já que o Map possui vários métodos embutidos pra te auxiliar na manipulação dos dados: const mapaProdutos = new Map( produtos.map(produto => [produto.id, produto]) ); // Aqui também temos performance O(1)! function encontrarProduto(id) { return mapaProdutos.get(id); } Todas as abordagens acima tem performance O(1), ou seja, independente da quantidade de itens que você tiver no array, a velocidade de acesso aos dados é praticamente constante!

Mar 27, 2025 - 18:45

Indexação de dados para aplicações frontend

A eficiência no tratamento de dados de APIs é um fator crítico para garantir uma experiência fluida ao usuário. À medida que os conjuntos de dados crescem, operações aparentemente simples, como buscar um item específico em uma lista, podem se tornar inimigos de performance.

Nesse artigo, vou mostrar algumas formas de lidar com dados de API que podem transformar buscas lentas em acessos instantâneos. Pega um cafezinho e vamos nessa! ☕

Sumário

O problema dos arrays
A Solução: Indexação de Dados da API
Técnicas ninja de indexação
Performance na prática
Um extra: Objetos vs Maps
Conclusão

Quem aí lembra do Gato A Jato?

O problema dos arrays

Normalmente, uma API entrega dados assim:

const produtos = [
  { id: 1, nome: "Smartphone Ultra Mega", categoria: "eletronicos", preco: 1599.99 },
  { id: 2, nome: "Sofá Confortex", categoria: "moveis", preco: 899.50 },
  { id: 3, nome: "Smart TV 55pol", categoria: "eletronicos", preco: 2499.99 },
  // ... e mais uns 500 produtos que sua aplicação precisa gerenciar
];

Quando você precisa acessar esses dados, você acaba recorrendo a métodos como find() ou filter():

// Todo mundo já escreveu isso um dia
function encontrarProdutoPorId(id) {
  return produtos.find(produto => produto.id === id);
}

function filtrarPorCategoria(categoria) {
  return produtos.filter(produto => produto.categoria === categoria);
}

O problema é que esses métodos fazem uma busca linear, o que significa que o tempo de execução aumenta linearmente com o tamanho do array. Ou seja: quanto mais produtos você tem, mais tempo demora. E isso ocorre porque esses métodos percorrem cada item da lista até encontrar o que você quer (busca de performance O(n)).

Pra gente ter uma ideia geral sobre a performance de um algoritmo, é só a gente dar uma olhada no gráfico abaixo pra saber onde cada notação big-O se encontra. Aqui, vamos focar em performances O(n) e O(1).

Fonte: Complexidade e performance de um algoritmo, por Ivan Queiroz

Observação: A performance que levaremos em conta nesse artigo é a de acesso aos dados indexados e não a de criação das indexações, já que, para o usuário final, o acesso aos dados é o que vai fazer a diferença.

A Solução: Indexação de Dados da API

Indexar significa criar uma estrutura de dados onde o acesso é instantâneo, como um índice de livro. No JavaScript, podemos fazer isso facilmente com objetos ou Maps.

// Transformando nosso array em um objeto indexado
// Com reduce:
const produtosPorId = produtos.reduce((acc, produto) => {
  acc[produto.id] = produto;
  return acc;
}, {});

// OU com Object.fromEntries:
const produtosPorId = Object.fromEntries(
  produtos.map(produto => [produto.id, produto])
);

// Agora o acesso é instantâneo: performance O(1)
function encontrarProdutoPorId(id) {
  return produtosPorId[id];
}

/* Exemplo de retorno de produtosPorId:
{
  1: { id: 1, nome: "Smartphone Ultra Mega", categoria: "eletronicos", preco: 1599.99 },
  etc...
}
*/

Se você quiser, também pode usar a classe Map para mais flexibilidade, já que o Map possui vários métodos embutidos pra te auxiliar na manipulação dos dados:

const mapaProdutos = new Map(
  produtos.map(produto => [produto.id, produto])
);

// Aqui também temos performance O(1)!
function encontrarProduto(id) {
  return mapaProdutos.get(id);
}

Todas as abordagens acima tem performance O(1), ou seja, independente da quantidade de itens que você tiver no array, a velocidade de acesso aos dados é praticamente constante!