Debounce inside functional component in React.js

Question

Trying to create a delay on react component that has input field that updates on change.

Here's the code:

import React from 'react'; 
import Input from "@material-ui/core/Input";
import {debounce} from "lodash";
...

const SampleRow = () => {
    let [newFriend, setNewFriend] = React.useState({name: '', lastSeen: '', contactIn: ''});

    const onAddFriend = debounce(() => {
        if(newFriend.name.length === 0){
            return;
        }
        console.log(newFriend.name);
    }, 2000);

    return (
        
            
                 {
                        setNewFriend({...newFriend, name: event.target.value});
                        onAddFriend();
                    }}
                    placeholder={"Add friend"}
                    disableUnderline={true}
                />
            
            {newFriend.lastSeen ? newFriend.lastSeen : ''}
            {newFriend.contactIn ? newFriend.contactIn : ''}
            
        
    )
};

What happens is that the console.log prints out every change (after the timeout of 2s), and won't cancel the previous triggers.

The question is why is that happens? and how could this could be solved?

I've found similar questions with complex useDebounce logic or class-components. Didn't find a reference for this problem.

user_2723983 · Answer

The issue here is that your debounced function is being recreated on each render.

One way to solve this is to move it out of the functional component. Another way is to change your component to a Class component and save your debounced function as a property.

const { useState } = React
const { debounce } = _;

const onAddFriend = debounce(console.log, 2000);

const App = () => {
 
  const [newFriend, setNewFriend] = useState({name: '',   lastSeen: '', contactIn: ''});
  
  const handleInput = (event) => {
    setNewFriend({...newFriend, name: event.target.value});
    onAddFriend(event.target.value);
  }
  
  return (
    
      
        
          Update  {newFriend.name}
          
            
          
        
      
    
  )
}

ReactDOM.render(,
document.getElementById("root"))

user_13897065 · Answer

Ciao, try to cancel the prevoius trigger:

import React from 'react'; 
import Input from "@material-ui/core/Input";
import {debounce} from "lodash";
...

const SampleRow = () => {
  let [newFriend, setNewFriend] = React.useState({name: '', lastSeen: '', contactIn: 
''});

const onAddFriend = debounce((abort) => {
    if(abort){
        return;
    }
    console.log(newFriend.name);
}, 2000);

return (
    
        
             {
                    setNewFriend({...newFriend, name: event.target.value});
                    let abort = false;
                    if(event.target.value.length === 0){
                      abort = true;
                    }
                    onAddFriend(abort);
                }}
                placeholder={"Add friend"}
                disableUnderline={true}
            />
        
        {newFriend.lastSeen ? newFriend.lastSeen : ''}
        {newFriend.contactIn ? newFriend.contactIn : ''}
        
    
)
  };

user_2542562 · Answer

Try this. It will always check existing debounced in the queue, and cancel it finds any. Refer : How to cancel a debounced function after it is called and before it executes?

Debounce inside functional component in React.js

3 Answers