How to do timeout and then clear timeout in react functional component?
You can use something like this.
import React, { useRef } from 'react';const Menu = () => { const timerRef = useRef(null); const onMouseEnter = () => { timerRef.current = setTimeout(() => {}, 1000); } const onMouseLeave = () => { if(timerRef.current) { clearTimeout(timerRef.current); } } return <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />}What's happening here is that, we are saving the timer's reference in a react ref. This can then be used to check and clear the timer in another function.