Delay React onMouseOver event

Question

I have a list of elements, when hovering one of these, I'd like to change my state.

<ListElement onMouseOver={() => this.setState({data})}>Data</ListElement>

Unfortunately, if I move my mouse over the list, my state changes several times in a quick succession. I'd like to delay the change on state, so that it waits like half a second before being fired. Is there a way to do so?

Answer 1

You can use debounce as a dedicated package or get it from lodash, etc:

Useful for implementing behavior that should only happen after a repeated action has completed.

const debounce = require('debounce');

class YourComponent extends Component {
  constructor(props) {
    super(props);

    this.debouncedMouseOver = debounce(handleMouseOver, 200);
  }

  handleMouseOver = data => this.setState({ data });

  render() {
    const data = [];
    return <ListElement onMouseOver={() => this.debouncedMouseOver(data)}>Data</ListElement>;
  }
}