React select async

Escenario

Estoy diseñando un formulario web en el que quiero mostrar un combo que se carga dinámicamente con una petición XHR.

Problema

Los datos a cargar cuentan con miles de registros. Necesito un combo que se cargue de manera dinámica y disponga de un autocomplete para filtrar los resultos.

Solución

React select es un módulo de React que he venido usando desde hace algún tiempo y siempre ha respondido a mis expectativas. Hasta ahora nunca lo había utilizado para cargar los datos de manera asíncrona. La diferencia es que, en vez de usar el componente por defecto, usamos react-select/async y la llamada loadOptions debe devolver un promise. Al final, he acabado descartando usar un react-select porque necesitaba cargar más de 7000 registros y por muy rápido y asíncrono que sea, la capacidad de reacción del combo disminuye considerablemente, afectando la experiencia de usuario. Aun así me he dicho que voy a dejar el código por aquí por si algún otro día me hace fata:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *