Trying to improve rendering performance

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 true).

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!

[Mayurkoli]

How i learn this

[michaelrambeau]

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.

For a single click that generated 3 actions, state updates by the reducer take a total of about 30ms. (but the number fluctuate a lot between tests) That is pretty slow for pure JavaScript functions; we cannot expect the app to run in 60 FPS ( = 16 ms per frame!)