Millones de opciones en React dropdown

Hay una mejor manera de implementar millones de opciones en desplegamiento. En mi caso puede haber más de un millón de usuarios y necesito seleccionar un usuario a la vez. Tengo una opción, hacer una llamada asincrónica para cada letra cuando escriba y puedo filtrar a los usuarios. ¿Hay otros métodos para implementar? Si atan todas las opciones para desplegar, ¿hará que mi aplicación se desacelere?

Pregunta hecha hace 3 años, 5 meses, 0 días - Por codeglitch

4 Respuestas:

  • Puedes hacerlo de dos maneras. Uno es lo que ya te has dicho. Haciendo llamadas asinc. O también puede hacerlo de una manera más simple, Esto todavía tendrá un gran aumento de rendimiento. Todavía no es muy recomendable filtrar en el lado cliente por un millón de artículos. Pero sin embargo, es posible y no he visto ningún éxito importante.

    1. Utilice una variable estatal para mantener lo que va a renderizar y otra variable estática para mantener toda su colección de millones.

    2. En la búsqueda, filtras esa lista de un millón y la asignas a la variable estatal.

    1. Render sólo los elementos que están en la variable estatal.

    Consejo: Asegúrese de que su método de filtro no devuelve más que decir, 1000 artículos en cualquier momento, esto obligará al usuario a entrar más caracteres a buscar y mantendrá la interfaz de usuario suave.

    Respondida el Dec 17, 2020 a las 06:31 - por devdynamox

    Votos positivos: 0 | Votos negativos: 0

  • Sí, tener una lista grande para renderizar hará que su aplicación sea lenta ya que tendrá que montar y desmontar cuando el usuario está escribiendo. Idealmente el cliente debe enviar solicitudes al servidor utilizando debounce o algo para limitar las solicitudes y servidor debe enviar una respuesta paginada / top X número de usuarios que coinciden con la entrada.

    Respondida el Dec 17, 2020 a las 06:39 - por codemasterx

    Votos positivos: 0 | Votos negativos: 0

  • Sí, cargar todas las opciones de un dropdown con más de un millón de elementos podría afectar el rendimiento de tu aplicación y volverla menos eficiente. Aquí te dejo algunas alternativas que podrías considerar para implementar un dropdown con tantas opciones:

    • Búsqueda asincrónica: Como mencionaste, puedes implementar una funcionalidad de búsqueda asincrónica que realice una llamada a la API cada vez que el usuario empiece a escribir en el campo de búsqueda. Esto permitirá filtrar la lista de usuarios de manera más eficiente y mostrar solo las opciones relevantes en el dropdown.
    • Paginación: En lugar de cargar todas las opciones a la vez, podrías implementar una paginación en el dropdown para mostrar solo un número limitado de usuarios a la vez. El usuario podría desplazarse a través de las diferentes páginas para encontrar al usuario deseado.
    • Virtualización: Otra técnica que podrías considerar es la virtualización, que consiste en renderizar solo los elementos visibles en la pantalla en lugar de todos los elementos a la vez. Esto ayuda a reducir la carga en la aplicación y mejorar el rendimiento.
    • Filtros y categorías: Además de la búsqueda, podrías implementar filtros y categorías para organizar y facilitar la selección de usuarios. Por ejemplo, podrías permitir al usuario filtrar por departamento, ubicación, o cualquier otra característica relevante.

    Implementar una o varias de estas técnicas podría mejorar significativamente la eficiencia de tu aplicación al trabajar con una gran cantidad de opciones en un dropdown. Te recomendaría probar diferentes enfoques y medir el rendimiento para determinar cuál es la mejor solución para tu caso específico.

    Respondida el Dec 18, 2020 a las 06:33 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Métodos para implementar millones de opciones en un menú desplegable de React:

    1. Llamadas asincrónicas con filtrado:

    Realiza llamadas asincrónicas al servidor a medida que el usuario escribe para recuperar y filtrar usuarios. Ventajas: La carga inicial es rápida. Solo se cargan los usuarios relevantes, lo que mejora el rendimiento. Desventajas: Puede ser lento si el servidor es lento o hay muchos usuarios.

    2. Paginación:

    Divide los usuarios en páginas y solo carga la página actual. A medida que el usuario se desplaza, carga páginas adicionales. Ventajas: Reduce la carga inicial. El rendimiento sigue siendo bueno incluso con un gran número de usuarios. Desventajas: Puede introducir un retraso al cargar páginas adicionales.

    3. Virtualización:

    Utiliza técnicas de virtualización, como "react-virtualized" o "react-window", para renderizar solo los elementos visibles del menú desplegable. Ventajas: Excelente rendimiento incluso con millones de opciones. La experiencia del usuario es fluida. Desventajas: Puede ser más complejo de implementar.

    4. Búsqueda incremental:

    Implementa una barra de búsqueda que permite al usuario buscar usuarios por nombre o correo electrónico. Reduce significativamente el número de opciones que se muestran en el menú desplegable. Ventajas: Facilita la búsqueda de usuarios específicos. Mejora la experiencia del usuario. Desventajas: Puede no ser adecuado para todos los casos de uso.

    ¿Afectará la unión de todas las opciones al rendimiento de la aplicación?

    Sí, adjuntar todas las opciones a la vez puede ralentizar considerablemente la aplicación. Esto se debe a que el navegador tendrá que renderizar y administrar millones de elementos DOM. Utiliza los métodos anteriores para cargar y mostrar usuarios de manera eficiente sin impactar el rendimiento.

    Recomendaciones:

    Para más de un millón de usuarios, considera usar Paginación o Virtualización. Si la velocidad de respuesta es crítica, usa Llamadas asincrónicas con filtrado. Considera la Búsqueda incremental para mejorar la facilidad de uso y reducir el número de opciones mostradas.

    Respondida el Dec 18, 2020 a las 06:44 - por Gemini

    Votos positivos: 0 | Votos negativos: 0