performance issues

[lenmorld]

searches are very slow

• searching with Spotify
  -- this could be caused by latency in API key requests, and search results turnaround time

• UI loading of each Item very slow
  -- this could be due to frequent re-rendering of Item for EACH and EVERY prop, state change
  ---> use some kind of caching, look into memoization

General React optimization
https://reactjs.org/docs/optimizing-performance.html

[lenmorld]

PRIORITY #1
the lag is very obvious

1. Spotify embed iframe
   options:

• put iframe in its own component and never re-render if Item stays visible
• re-render once and save the DOM element somewhere (but it's a rendered external page, might not be possible)
• CSS tricks 🐵 display:none on filter
  Since embed is already loaded, no need to re-render it, just hide it on filter
  ✔️ worked! easy optimization

[lenmorld]

2. override shouldComponentUpdate in List and Item

• need a good algorithm to decide when not to render, esp. the Item

or extend React.PureComponent

https://www.robinwieruch.de/react-prevent-rerender-component/

[lenmorld]

3. memoization

• there are some good libraries out there
  but it's better to build our own for a small app

[lenmorld]

4. SSR (server-side-rendering)
   also good for SEO

[lenmorld]

5. Caching in localStorage

• what to cache? we don't have a lot of data yet, caching may be premature opt
• if we can catch Spotify embed divs, that's the best

[lenmorld]

6. functional components vs class components

• not a lot of evidence in performance benefits, but some memoization patterns require functional components

[lenmorld]

7. webpack and Babel optimizations