Inspired by alik0211/pokedex, I developed Pokemon List App using React. To render 809 Pokemon Cards at high speed, I use a library called react-virtualized.
Source code
Demo site
Motivation
At first I was developing my app while referring to alik0211/pokedex. However, a performance problem occurred. When trying to render 809 Pokemon components, react render processing is very slow.
In order to solve this problem, I adopted react-virtualized.
bvaughn/react-virtualized
Reactive-virtualized can render efficiently when rendering a large number of components. However, it supports list rendering, but grid rendering is not supported. Therefore, I had to implement grid rendering hard.
Result
By using react-virtualized, FMP is about 4 times faster.
FMP Score: 3449.4ms → 799.8ms
This is the case when using react-virtualized.
This is when not using react-virtualized.
Can you see that the app is getting really fast?
