Use TypeScript React to debounce click event functions

Question

I'm trying to implement the lodash debounce function on the onclick function to avoid multiple clicks on the button. The solution I came up with is this:

function saveForm() {
//Do some operations here
}

<Button onClick={debounce(() => saveForm, 1500, {
              maxWait: 2000 })}>
              save
</Button>

I see many examples of performing debounce on a function outside of the return, and then using that debounced function in onclick. Is it wrong to perform debounce (inline) directly on the button element?

Answer 1

In terms of good coding practices, you should avoid putting too much business logic in JSX. Just extract your onClick handler outside of JSX.

Secondly, you don't want to return to saveForm after deshaking. Instead call it. So replace () => saveForm with saveForm.

function saveForm() {
//在这里执行操作
}

const debouncedClickHandler = debounce(saveForm, 1500, {maxWait: 2000})

<Button onClick={debouncedClickHandler}>保存</Button>

You can also use the useCallback hook. I leave the best practices for using useCallback hooks up to you to explore if needed.