fix: infinite loop in multiselect effect#115
Conversation
📝 Walkthrough📝 WalkthroughWalkthroughLos cambios realizados en el archivo Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MultiSelectDropdown
participant onChangeFunction
User->>MultiSelectDropdown: Interactúa con el dropdown
MultiSelectDropdown->>onChangeFunction: Llama a onChange con los elementos seleccionados
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
💤 Files with no reviewable changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
📒 Files selected for processing (1)
- frontend/src/components/dropdown/MultiSelectDropdown.tsx (1 hunks)
🔇 Additional comments (1)
frontend/src/components/dropdown/MultiSelectDropdown.tsx (1)
Line range hint
1-111: Apruebo la eliminación del useEffect.La eliminación del hook useEffect resuelve efectivamente el problema del bucle infinito mencionado en los objetivos del PR. Esta modificación permite un control más preciso sobre cuándo se deben borrar los elementos seleccionados, lo que es una mejora significativa en la funcionalidad del componente.
Sin embargo, es crucial que entiendas las implicaciones de este cambio:
- Ya no hay un restablecimiento automático de los elementos seleccionados cuando cambian las propiedades 'items' o 'onChange'.
- Ahora, cualquier limpieza de los elementos seleccionados debe realizarse manualmente desde el componente padre.
Asegúrate de que todos los desarrolladores que utilicen este componente estén al tanto de estos cambios en su comportamiento.
Ejecuta el siguiente script para verificar que no haya referencias al useEffect eliminado en otros archivos:
✅ Verification successful
Confirmación de la Eliminación de
useEffectNo se encontraron referencias a
useEffectenfrontend/src/components/dropdown/MultiSelectDropdown.tsx. La eliminación del hookuseEffectha sido verificada exitosamente, resolviendo el problema del bucle infinito mencionado en el PR.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Descripción: Buscar referencias a useEffect en relación con MultiSelectDropdown # Prueba: Buscar referencias a useEffect y MultiSelectDropdown en el mismo archivo rg --type typescript -e "useEffect.*MultiSelectDropdown" -e "MultiSelectDropdown.*useEffect"Length of output: 129
Script:
#!/bin/bash # Descripción: Buscar referencias a useEffect en MultiSelectDropdown.tsx # Buscar 'useEffect' dentro de 'MultiSelectDropdown.tsx' rg "useEffect" frontend/src/components/dropdown/MultiSelectDropdown.tsx -A 2Length of output: 76
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Descripción
Quita useEffect "innecesario"; este había sido incluido para que al actualizar la lista de elementos seleccionados en el multiselect en el componente padre el multiselect se "limpiara", pero genera problemas ya que tenía como dependencias dos variables que terminaban generando un loop infinito.
Ahora la lista de seleccionados se debe vaciar manualmente cuando sea necesario. Actualmente no hay lugar en el front donde se requiera hacer eso por lo que no es un breaking change; el multi select solo se está ocupando en audits:edit:general.
Motivación y Contexto
Evitar un loop infinito en custom data.
¿Cómo ha sido probado?
En audits -> edit -> general, modificar los collaborators.
Capturas de pantalla (si es apropiado):
Tipos de cambios
Lista de verificación:
Summary by CodeRabbit
onChange, mejorando la experiencia del usuario al mantener las selecciones previas.