question-mark
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.

No throttling on resize event handlers.

See original GitHub issue

Issue

When you resize windows fast, everything is laggy, and you feel like: image


My take on this:

Cause

The resize event handler is not throttled.

Solution

import { throttle } from 'lodash'; // You have it as dependency already.

  {/* ... component stuff */}
   componentDidMount() {
    window.addEventListener('resize', this.onResize);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.onResize);
  }

  onResize = throttle(this.handleOnResize, 200, { trailing: true });

  {/* onResize renamed to handleOnResize */}
  {/* ... more component stuff */}

Apart from that

Thank you for making this!

❤️ -Dan

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:9 (7 by maintainers)

github_iconTop GitHub Comments

3reactions
wuweiweiwucommented, Mar 10, 2018

@Hypnosphi @danielduan Done! I took a slightly different approach and delayed state update until the user stops dragging for 50ms using setTimeout and clearTimeout so we don’t call setState a billion times 😃

0reactions
Hypnosphicommented, Mar 18, 2018

Released as 3.4.0-rc.1

Read more comments on GitHub >

github_iconTop Results From Across the Web

No throttling on resize event handlers. · Issue #1990 - GitHub
Issue When you resize windows fast, everything is laggy, and you feel like: My take on this: Cause The resize event handler is...
Read more >
Throttle function (lodash inspired) to handle resize event using ...
But I'm not a fan of bringing entire libraries to my dependency list just to use a simple functionality like that, so I've...
Read more >
Optimizing window.onresize - Ben Centra
resize event listener window.addEventListener('resize', function() { // only run if we're not throttled if ( ...
Read more >
JavaScript Function Throttling | Kevin Chisholm - Blog
It's quite common to assign an event handler that will run every time the user resizes the browser. Unfortunately, however, there is no...
Read more >
How to Use Throttle and Debounce in React to Increase ...
Without optimization, the following happens. On each window resize event, the window resize event handler is called. So if the user, for example ......
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 Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found