title: Adding hovering effects with a timeout in React
body: <p><a href="https://codesandbox.io/s/timeout-hover-delay-xjwoz?file=/src/index.tsx" rel="nofollow noreferrer">See codesandbox here</a></p>
  <p>I am trying to add a modal that shows up with a delay when hovering over a div. However, it's getting a bit tricky because, for example, if the timeout interval is 1000ms, and you hover over said div and then hover away from that div within the 1000ms, the modal will still show up. What I want to happen is for the modal to show up after the delay (e.g. 1000ms) <em>only</em> if you have maintained mouseover over the div for that delay period. How can I create this effect instead of the side effects I'm seeing now? Thanks!</p>
  <p><strong>index.tsx:</strong></p>
  <pre><code>import * as React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import &quot;./styles.css&quot;;
  
  const Modal: React.FC = () =&gt; {
    const divRef = React.useRef&lt;HTMLDivElement&gt;(null);
    const [showModal, setShowModal] = React.useState&lt;boolean&gt;(false);
  
    React.useEffect(() =&gt; {
      const divNode = divRef.current;
  
      const handleEvent = (event: Event): void =&gt; {
        if (divNode) {
          if (divNode.contains(event.target as Node)) {
            setTimeout(() =&gt; setShowModal(true), 1000);
          } else {
            setShowModal(false);
          }
        }
      };
  
      document.addEventListener(&quot;mouseover&quot;, handleEvent);
  
      return () =&gt; {
        document.removeEventListener(&quot;mouseover&quot;, handleEvent);
      };
    }, [divRef]);
  
    return (
      &lt;div className=&quot;container&quot;&gt;
        &lt;div className=&quot;div&quot; ref={divRef}&gt;
          Hover Me
        &lt;/div&gt;
        {showModal &amp;&amp; &lt;div className=&quot;modal&quot;&gt;modal&lt;/div&gt;}
      &lt;/div&gt;
    );
  };
  
  const App: React.FC = () =&gt; (
    &lt;&gt;
      &lt;Modal /&gt;
      &lt;Modal /&gt;
      &lt;Modal /&gt;
      &lt;Modal /&gt;
    &lt;/&gt;
  );
  
  const rootElement = document.getElementById(&quot;root&quot;);
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>