#### Correct implementation:-
```js
import React from "react";
const throttle = (callback, limit) => {
var wait = false;
return function(...arg) {
if (!wait) {
console.log("updating");
callback.call(this, ...arg);
wait = true;
setTimeout(function() {
wait = false;
}, limit);
}
};
};
const otherFun = e => {
console.log(e.target.value);
};
export default class App extends React.Component {
throttled = throttle(otherFun, 2000);
onInput = e => {
e.persist();
this.throttled(e);
};
render() {
return (
<>
>
);
}
}
```
#### Wrong implementation
```js
import React from "react";
const throttle = (callback, limit) => {
var wait = false;
return function() {
if (!wait) {
console.log("updating");
callback.call();
wait = true;
setTimeout(function() {
wait = false;
}, limit);
}
};
};
const otherFun = e => {
console.log(e.target.value);
};
export default class App extends React.Component {
onInput(e) {
throttle(otherFun, 2000);
}
render() {
return (
<>
>
);
}
}
```
Understanding on changed implementation.
```js
onInput(e) {
throttle(otherFun, 2000);
}
```
This does not call the function `otherFun` but creates a "new version" of the function. And doing it like I did would create it on each input, that's why I created it as a class variable:
```js
export default class App extends React.Component {
throttled = throttle(otherFun, 2000);
```
and then call it `this.throttled(e);`
I also needed to add `e.persist();` due to how the SyntheticEvents work in React.
Also, the throttled implementation I created:
```js
return function() {
if (!wait) {
console.log("updating");
callback.call();
wait = true;
setTimeout(function() {
wait = false;
}, limit);
}
};
```
returns a copy of the function that does not expect any arguments. so new changes:
```js
return function(...arg) {
// and
callback.call(this, ...arg);
```
added supports for an arbitrary number of arguments .