Como Usar react-select-async-paginate com Vite e React-TS

O react-select-async-paginate é uma biblioteca baseada no React Select que permite carregar opções de forma assíncrona e paginada. É ideal para aplicações que lidam com grandes volumes de dados, como listagens de usuários, produtos ou qualquer conjunto que não possa ser carregado integralmente de uma só vez.

Este guia mostra como integrar o react-select-async-paginate em um projeto criado com Vite + React-TS, garantindo compatibilidade com TypeScript e desempenho desde o início.

O Que É react-select-async-paginate?

O react-select-async-paginate é uma extensão do React Select que adiciona suporte à paginação durante o carregamento assíncrono das opções. Ele é especialmente útil quando você precisa exibir listas grandes, mas deseja evitar sobrecarregar a interface ou a rede com dados desnecessários.

Essa biblioteca mantém todas as funcionalidades conhecidas do React Select, como busca, agrupamento e estilização, enquanto permite carregar novos dados conforme o usuário rola dentro do menu suspenso.

Configuração Inicial do Projeto

Comece criando um novo projeto com Vite usando o template React-TS:

npm create vite@latest my-app --template react-ts
cd my-app
npm install

Instale as dependências necessárias:

npm install react-select-async-paginate react-select

Se quiser usar ky ou axios para chamadas HTTP, instale também:

npm install ky

Estrutura Básica do Projeto

Organize seu projeto da seguinte forma:

my-app/
├── public/
├── src/
│   ├── components/
│   │   └── AsyncSelect.tsx
│   ├── utils/
│   │   └── loadOptions.ts
│   ├── App.tsx
│   └── main.tsx
├── package.json
└── tsconfig.json

Criando o Componente AsyncSelect

Crie um componente reutilizável que usa o AsyncPaginate:

// src/components/AsyncSelect.tsx
import React, { useState } from 'react'
import AsyncPaginate from 'react-select-async-paginate'
import { loadOptions } from '../utils/loadOptions'

export type OptionType = {
  value: number
  label: string
}

export default function AsyncSelect() {
  const [value, setValue] = useState<OptionType | null>(null)

  return (
    <AsyncPaginate
      value={value}
      loadOptions={loadOptions}
      onChange={(option) => setValue(option as OptionType)}
      additional={{
        page: 1
      }}
    />
  )
}

Função loadOptions para Carregar Dados Paginados

Implemente a função responsável por buscar os dados da API:

// src/utils/loadOptions.ts
import { OptionType } from '../components/AsyncSelect'
import ky from 'ky'

const URL = 'https://jsonplaceholder.typicode.com/posts'

export const loadOptions = async (
  search: string,
  prevOptions: OptionType[],
  { page }: { page: number }
): Promise<{ options: OptionType[]; hasMore: boolean }> => {
  const response = await ky.get(`${URL}?_start=${(page - 1) * 10}&_limit=10`).json<any[]>()

  const newOptions = response.map((item) => ({
    value: item.id,
    label: item.title
  }))

  return {
    options: newOptions,
    hasMore: newOptions.length === 10
  }
}

Usando o Componente na Aplicação

Agora, basta usá-lo dentro do arquivo principal da aplicação:

// src/App.tsx
import React from 'react'
import AsyncSelect from './components/AsyncSelect'

function App() {
  return (
    <div style={{ maxWidth: '500px', margin: '2rem auto' }}>
      <h1>Exemplo com react-select-async-paginate</h1>
      <AsyncSelect />
    </div>
  )
}

export default App

Considerações Sobre TypeScript

Ao trabalhar com TypeScript, defina tipos claros para as opções (OptionType) e garanta que a função loadOptions retorne estruturas compatíveis com o esperado pelo componente. Isso evita erros relacionados a tipagem e melhora a manutenibilidade do código.

Além disso, use imports corretos e declare os tipos nas props e estados para maior clareza e segurança.

Principais Funcionalidades e Benefícios

• Carregamento assíncrono e paginado: Ideal para grandes conjuntos de dados.
• Integração completa com TypeScript: Garante segurança de tipos e melhor experiência de desenvolvimento.
• Leve e modular: Baseado no React Select, mantém todas as funcionalidades conhecidas.
• Fácil manutenção: Estrutura limpa e separação de responsabilidades entre componentes e lógica de carregamento.

Conclusão

O uso de react-select-async-paginate com Vite + React-TS oferece uma solução moderna, performática e bem estruturada para lidar com seletores assíncronos em aplicações React. Com suporte a paginação automática e integração simples com APIs REST, ele se mostra uma excelente escolha para projetos escaláveis.

Se você busca performance e boas práticas de desenvolvimento, adotar esse componente no seu projeto React é uma decisão acertada.