How to delay onMouseEnter in React?

Question

JavaScript

People, in general, there is such a state of affairs:

toggleHover() {
    this.setState({ hover: !this.state.hover });
  }

Making an event:

onMouseEnter={this::this.toggleHover} onMouseLeave={this::this.toggleHover}>

How to make make a delay or smooth element?

Answer 1

I only recommend making this function via debounce (or equivalents):

constructor(props) {
    super(props);
    const finalMouseDelay = props.mouseDelay || 300;
    
    this.handleMouseLeave = this.handleMouseLeave.bind(this);
    this.handleMouseEnter = this.handleMouseEnter.bind(this);
    this.toggleHover = _.debounce(this.toggleHover.bind(this), finalMouseDelay);
    
    this.state = { hover: false };
  }

  handleMouseLeave() {
    this.toggleHover(false);
  }
  
  handleMouseEnter() {
    this.toggleHover(true);
  }

  toggleHover(to) {
    this.setState({ hover: to });
  }

A working example is here - jsfiddle.net/yuvuyrhv/24
Otherwise you will have wild lags if the user moused over/mouse down/over again... at an interval faster than the one you set