<pre class="shiki github-dark shaku"><code>import { EffectCallback, useRef, useEffect } from 'react'export function useEffectOnce(effect: EffectCallback) { const isExecuted = useRef(false) useEffect(() =&gt; { let cleanup: any = null if(effect &amp;&amp; !isExecuted.current) { isExecuted.current = true cleanup = effect() } return () =&gt; { isExecuted.current = false cleanup &amp;&amp; cleanup() } }, [])}// 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>

Implement useEffectOnce, remember to execute cleanup and reset isExecuted after unmount

Here is a simple problem, implement useEffectOnce() as the name says itself, it runs an effect only once.…