Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Trying to improve rendering performance

See 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 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!

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:9 (8 by maintainers)

github_iconTop GitHub Comments

Mayurkolicommented, May 31, 2018

How i learn this

michaelrambeaucommented, May 12, 2016

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!)

Read more comments on GitHub >

github_iconTop Results From Across the Web

What can you do to increase Video Rendering speed?
There are a great variety of methods you can use to reduce render times for media. The first and most obvious way is...
Read more >
12 Tips To Speed Up Your Rendering - Renderro
1. Check running processes on the computer · 2. Be selective with your effects · 3. Better Software = Faster Rendering.
Read more >
7 Tips for Faster 3D Rendering | IEEE Computer Society
How to Decrease Rendering Times · Upgrade your RAM. First, consider upgrading your RAM. · Invest in better software. · Tinker with your...
Read more >
How to Render Faster - In-Depth Guide to ... - CGDirector
We all want to render faster. With this in-depth guide you'll find a multitude of methods to speed up your rendering and overall...
Read more >
8 Tweaks to Speed Up 3D Rendering Cycles
Modern CPUs come with several cores. The number of threads indicates the number of used cores. If you want to speed up 3D...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found