[🐛] Performance Issue: MessageList Component Re-render Behavior
I maintainer di solito rispondono entro 1 giorno
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Idoneità per principianti
- 25/100
- Tipo di issue
- Bug
- Chiarezza
- Da chiarire
- Stato di attività
- Ferma
- Stack tecnologico
- react-native, typescript
Direzione di ricerca
Inizia da package/src/components/MessageList/MessageList.tsx intorno alla riga 658 e riproduci il comportamento segnalato usando come riferimento la registrazione allegata di DevTools Profiler. Confronta gli aggiornamenti dell’elenco e lo scorrimento, quindi determina il comportamento atteso del rerendering per gli elenchi grandi o aggiornati frequentemente. Done deve includere una diagnosi riproducibile e un risultato delle prestazioni chiaramente convalidato.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
Issue
Hello! 👋 In our React Native app, we are using the GetStream library and have encountered a performance issue with the MessageList component. It appears to rerender all the messages in the list on every change to the list data (e.g., adding new messages or updating existing ones). Additionally, during scrolling, we’ve observed that the entire list sometimes rerenders continuously, further impacting performance. This behavior leads to noticeable lag and reduced app performance, especially when working with a large dataset or frequent updates to the message list. We have tested the component using the default settings without overriding any internal components, but the issue persists.
We have noticed that the component seems to lack perf optimizations, such as the use of useMemo or useCallback. Could you provide any information about the expected performance of the MessageList component? Are there existing optimizations to address these issues, or are there plans to improve its performance in future updates?
Additionally, I am attaching a recording from the simulator showing an example of the application re-rendering where MessageList is used, with a visualization using the DevTools Profiler:
console.log for message Message YYY rendered X times is added here.
https://github.com/user-attachments/assets/23846116-cce6-4b0f-a535-2acac872e2ee
Any guidance or recommendations would be greatly appreciated. 🙇
Steps to reproduce
Steps to reproduce the behavior:
- Go to '...'
- Click on '....'
- Scroll down to '....'
- See error
etc...
Expected behavior
Project Related Information
Customization
Click To Expand
# N/A
Offline support
- I have enabled offline support.
- The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)
Environment
Click To Expand
package.json:
# N/A
react-native info output:
OUTPUT GOES HERE
- Platform that you're experiencing the issue on:
- iOS
- Android
- iOS but have not tested behavior on Android
- Android but have not tested behavior on iOS
- Both
stream-chat-react-nativeversion you're using that has this issue:e.g. 5.4.3
- Device/Emulator info:
- I am using a physical device
- OS version:
e.g. Android 10 - Device/Emulator:
e.g. iPhone 11
Additional context
Screenshots
Click To Expand
- Lingua principale
- TypeScript
- Stelle
- 1.2k
- Fork
- 378
- Merge medio
- 1g 2h
- PR unite (30g)
- 23
Preparare l'ambiente
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di GetStream/stream-chat-react-native
-
Feature Request
Difficoltà 4/5 3-5 giorni Idoneità per principianti 35/100
GetStream/stream-chat-react-native#3091 · 10 commenti · 3 reazioni ·
I maintainer di solito rispondono entro 1 giorno
-
Feature request: Custom image headers (AKA `imageHeadersProvider` in Stream Chat Android SDK)ApertaFeature Request
Difficoltà 4/5 3-5 giorni Idoneità per principianti 38/100
GetStream/stream-chat-react-native#2990 · 1 commento ·
I maintainer di solito rispondono entro 1 giorno
Tutte le issue di GetStream/stream-chat-react-native
Issue simili
-
priority: P2
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 65/100
prime-radiant-inc/evener#3291 ·
I maintainer di solito rispondono entro 1 giorno
-
accessibility bug revealjs
Difficoltà 2/5 1-3 ore Idoneità per principianti 84/100
quarto-dev/quarto-cli#14961 ·
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 90/100
supabase/agent-skills#614 ·
-
Content
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
RunestoneInteractive/rs#1559 · 1 commento ·
I maintainer di solito rispondono entro 2 giorni