This may just be something stupid I'm not getting (I'm not that skilled with HOCs), but here's my issue. I have a component declared in Typescript like this.

class DataGrid extends React.Component<DataGridProps>

I can export it like this:

const debouncedComponent = debounceRender(DataGrid, 1000, {})

It seems to work. But when I import and use this version in a TSX, I lose all typing on the properties. I've tried the Typescript version 'react-debounce-render' but no luck there either.

How can I accomplish this?

The change in the way the debounceRender function is exported (from export default to module.exports) has broken importing of the debounceRender, and is inconsistent with the documentation.

Now instead of import debounceRender from 'react-debounce-render';, imports must be import { debounceRender } from 'react-debounce-render';.

This isn't that big of a deal if you're only importing this once or twice, but if it is used pervasively, this creates a lot of extra work. Furthermore, because this repo is not using tags, there's not a great way to lock reliably to a particular version.

It is true that the readme said that "the extra default would be removed" but it wasn't actually necessary in the first place, and said nothing about the import changing.

My code was

export default debounceRender(MyComponent);```

and this worked great without the `default` in the example. 

Please do one of the folllowing:
1. Revert the export to use `export default` like before.
2. Update the documentation to show correct importing of the function.

Hi, debounceRender is great, just wished it was composable.
I'm currently wrapping debounceRender so it can be used with compose.

<--- wrapper --->
import debounceRender from 'react-debounce-render';

export const debounce = (wait = 0, options = {}) => component =>  
  debounceRender(component, wait, options);

<--- example usage --->
export default compose(
  withStyles(styles), 
  connect(
    mapStateToProps,  
    mapDispatchToProps
  ),  
  debounce(200, {maxWait: 400})
)(SomeComponent);

react docs: higher-order-components.html#convention-maximizing-composability

I'm trying to test it with functional components, but don't seem to notice any effect.

import { useEffect, useState } from 'react';
// @ts-ignore
import debounceRender from 'react-debounce-render';

export function Debounce() {
	const [counter, setCounter] = useState(0);

	useEffect(() => {
		window.requestAnimationFrame(() => {
			setCounter(counter + 1);
		});
	});

	return <p>{counter}</p>;
}

export default debounceRender(Debounce, 1000, { maxWait: 1000 });

In my tests it keeps counting every frame. Desired effect: counting once per second. Using React 17.0.1.
What's wrong?

I use it in the the Octokit docs site at https://octokit.github.io/rest.js/. I don't have tests for the docs site, so I'm not sure if the upgrade could break anything. It would be helpful to know what you changed with the latest release.

Thanks for your work on this library 👍

Thanks for this handy HOC!

I see the changes in 4.0.2 & 4.0.3, currently lodash and lodash.debounce are both listed in depencencies, while we actually import lodash/debounce.

I propose to keep locash.debounce and remove lodash, for a much smaller install size:

The package depends on lodash/debounce, and thus doesn't need the whole lodash lib in addition ?

From the react 16.5.0 release notes :
"Warn when this.state is initialized to props react issue 11658"

react-debounce-render does just that, and thus triggers the newly added warning every time :-)

eslint warns:

 error  Component definition is missing display name  react/display-name

on components that are wrapped with debounce.

Could it implement Convention: Wrap the Display Name for Easy Debugging?

In my create-react-app app (not Typescript) I use jest for tests. With 7.0.1 this works, but with 8.0.2 tests fail for components that use react-debounce-render.

Perhaps this is a jest configuration issue, but I still like to ask if react-debounce-render has been packaged/built/minified the right way in the npm package?

The reason I'm asking is the output from the test and the actual source in node_modules\react-debounce-render:

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
....

C:\dev\app\node_modules\react-debounce-render\dist\index.js:1
({"Object.":function(module,exports,require,__dirname,__filename,jest){import React, { Component } from 'react';
^^^^^^
SyntaxError: Cannot use import statement outside a module

I compared the old version's node_modules\react-debounce-render\lib\index.js and it is very different. It does not import React but starts like this:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.debounce = void 0;

Thanks!

Please support react 16 in your package.json. You also might want to consider moving react to a peerDependency.

Hello!

I wanted to check how the library works since it looks like something that exactly and quickly solves my current challenge but after installing it from npm (version 8.0.1), as I see TS declarations are not included in downloaded package.

Is there something not right with the package published on npm or I don't know about something?

Thank you in advance :)

Currently react 17 is a peer dependency. I think it should work fine with react 18 without changing the code.

With debounce, you can get 'starvation' where new events keep arriving, preventing you from ever re-rendering.

lodash.throttle allows one re-render per 'wait' period, which I think would still achieve the performance aims of this library without allowing the UI to get stuck.

I use typescript for react projects. If this project can be added to DefinitelyTyped we can

npm install @types/react-debounce-render

and use this awesome package in typescript projects.

With only a few extra hundred bytes, this library could include a higher-order component that is decorator-friendly. It would also then have the same method signature as react-redux's connect, React DnD, and other higher-order components: options => Component => func(Component, options)

import debounceRender from 'react-debounce-render';

export function debounceComponent(...args) {
  return function(Component) {
    return debounceRender(Component, ...args);
  }
}

Then you can attach to a component like:

@connect(state => { prop: state.prop })
@debounceComponent(100, { trailing: true })
export default MyComponent extends Component {}

Even if you don't want to use this as a decorator, making the component the sole argument to a bunch of applied partials allows you to export a reusable debouncer with custom options, like:

const myDebouncer = debounceComponent(100, { trailing: true });
export const myDebouncer;

Not a big deal if it's not included in the library, as I'll be using that myself... but I thought it could be helpful for other people as well. Thanks for this great utility!

I tested it and doesn't seem to work, tested having a setinterval with a lower value (100m) than the debounce value(1000ms), and with a console log on the render and it was being called every 100 ms

To trigger the debounce on the leader edge:
import debounceRender from 'react-debounce-render';
const debouncedMyReactComponent = debounceRender(MyReactComponent, 100, { leading: false });

Should it be { leading: true } maybe?

Hello!

I noticed the NPM package for this tool uses MIT license. Could we have that license added to this repo as well?

Thanks!

As outlined in https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#open-source-project-maintainers, it is recommended to use the new (react-async compatible) getDerivedStateFromProps rather than componentWillReceiveProps.

Libraries can use the react-lifecycles-compat polyfill to stay compatible with react < 16.3