Trying to improve rendering performanceSee original GitHub issue
Using the default grid (20 * 20 = 400 cells), it seems that there are some rendering performance issues. For example, if you try to draw a line quickly by drag and drop, some pixels are missing on the screen. By moving slowly the mouse, it is OK.
In addition, after having made that line, even if I don’t drag any more, pixels are still added on the grid when I simply move the mouse over the grid (I can see in the console that
dragging flag is still set to
Note: in production, the performance issues are less obvious than in dev because of several optimizations that make the code run faster. Redux dev tools for example are known to slow down things a lot (a lot of information is logged in the console after every action).
Measurements (using React Perf Chrome plugin)
Let’s check the rendering process by measuring time before and after rendering a single pixel on the grid.
Total time is not only the same, it is around 500 ms, which is too much time for a single pixel.
I can see that
Connect(PixelCell) is “wasted” 799 times!
Using a 2 times bigger grid (40 * 20)
Connect(PixelCell) is “wasted” 1599 times.
Let’s try to fix that!
- Created 7 years ago
- Comments:9 (8 by maintainers)
Top GitHub Comments
How i learn this
Tracking reducer performance
An other idea: checking if reducers are fast using a tool like redux-perf-middleware to see how much time it takes to update the state when an action is dispatched.