Cant seem to get Throttle working with onClick

[alex-r89]

Hi there,

Apologies, this may be down to me implementing the package incorrectly, but I dont seem to be able to get throttle to work with an onClick - if I rapidly click the button, the console log is fired multiple times. I have this set up as follows:

//throttled-button.js
const ThrottledButton = (props) => {
  const handleOnClick = () => throttle(1000, true, props.onClick)

  return <button onClick={handleOnClick} {...props}>{props.children}</button>
}


// logout.js
const handleLogout = () => {
  console.log("FIRED")
  logoutUser()
}

 <ThrottledButton onClick={handleLogout} type='button'>Logout</ThrottledButton>

I have also tried this in the following configuration, which also doesnt seem to work:

// logout.js
  const handleLogout = throttle(1000, true, () => {
    console.log("FIRED")
    logoutUser()
  })

 <button onClick={handleLogout} type='button'>Logout</button>

As mentioned, if I rapidly click the buttons in either of these configurations, I see FIRED console logged multiple times.

[seiyab]

It seems to be misuse.

Description:
There is misuse in expression <button onClick={handleOnClick} {...props}>{props.children}</button>.
You are overriding onClick={handleOnClick} by onClick in {...props}.

In addition, const handleOnClick = () => throttle(1000, true, props.onClick) is not what you want, neither.
When we call handleOnClick, it will create new throttled-function rather than call a throttled-function.
So clicking ThrottledButton will not affect anything even if you solve the problem above.

const handleLogout = throttle(1000, true, () => { ... }) is not what you want, neither.
The reason is somewhat confusing and you might need deep React insight.
handleLogout itself will be throttled-function, that you want.
However, React will re-create handleLogout on every rendering.
As a result, you will get a new throttled-function for each rendering so it behaves as if it is not throttled.

An example of available solutions:
Fix the throttled-function using useRef

const ThrottledButton = ({ onClick, ...props }) => {
  const debuoncedRef = React.useRef(null);
  if (debouncedRef.current === null) { debouncedRef.current = throttle(1000, true, props.onClick); }
  const handleOnClick = debouncedRef.current;

  return <button onClick={handleOnClick} {...props}>{props.children}</button>
}

[niksy]

@alex-r89 does @seiyab’s suggestion work for you?