Watchlist chart performance issues

[eddielee394]

major performance issues being caused by the charts on the WatchlistSymbolList component. Charts are rendering while navigating to other screens, causing overall performance issues. Need to unmount the component (cleanup method in useEffect() maybe?) when navigating away.

Steps to reproduce:

• Create a new watchlist
• Perform a symbol search
• Add 10 new symbols to the active watchlist
• As more symbols are added, performance decreases and the app begins to lag

Possible solutions Instead of rendering search component in a modal, we could navigate to the search screen and pop the watchlistsymbol screen from the stack which should unmount the component.

[eddielee394]

@RaidNeferius this is an issue I was trying to resolve yesterday. I think the core problem is with the navigation architecture I implemented. The challenge is that I need to somehow optimize the rendering of the WatchlistSymbolList item charts in a way that's less performance intensive. Some things i've tried:

• Instead of rendering the search within the component as a modal, pop the nav stack & render search as a different nav screen. This solved the performance issue when on the search screen, but there were still issues when trying to navigate back to the watchlist as it was taking a very long time to re-render each list item again.

[eddielee394]

flatlist optimizations https://link.medium.com/sCONnPoTo1