<pre class="shiki github-dark shaku"><code>import React, {useEffect, useRef} from 'react';export function useTimeout(callback: () =&gt; void, delay: number) { const callbackRef = useRef(callback); const timeoutIdRef = useRef(); // Update the callback function if it changes useEffect(() =&gt; { callbackRef.current = callback; }, [callback]); // Set up the timeout useEffect(() =&gt; { // Clear the previous timeout clearTimeout(timeoutIdRef.current); // Set a new timeout if delay is a valid number if (typeof delay === 'number' &amp;&amp; delay &gt;= 0) { timeoutIdRef.current = setTimeout(() =&gt; { callbackRef.current(); }, delay); } // Cleanup function return () =&gt; clearTimeout(timeoutIdRef.current); }, [delay]); // Function to clear the timeout externally if needed const clear = () =&gt; clearTimeout(timeoutIdRef.current); return clear;}// if you want to try your code on the right panel// remember to export App() component like below// export function App() {// return &lt;div&gt;your app&lt;/div&gt;// }</code></pre>

Solution for usetimeout hook by useEffect or useRef

TikTok

Create a hook to easily use setTimeout(callback, delay). 1. reset the timer if delay changes 2. DO NOT reset the timer if only callback changes…