<pre><code class="language-javascript">const [numTime,setNumTime] = useState(5);

 // xử lý non-blocking giúp ích cho việc load mượt hơn
 useEffect(() =&gt; {
 console.log(&quot;Run start&quot;);
 let timer;
 if(user){
 checkAuthLoginAnimated();
 }
 timer = setInterval(() =&gt; {
 setNumTime(prev =&gt; (prev &gt; 0 ? prev - 1 : 0));
 }, 1000);
 console.log(&quot;we can call api fetch user info here,...&quot;);
 
 return () =&gt; clearInterval(timer);
 }, [user]);
 
 useEffect(() =&gt; {
 console.log(&quot;change numTime : &quot;,numTime);
 if(numTime === 1){
 console.log(&quot;exit countdown and navigate to home&quot;);
 router.replace(&quot;/(screens)/(tabs)&quot;);
 }
 }, [numTime]);

</code></pre>
Result :
<pre><code>(NOBRIDGE) LOG Run start
 (NOBRIDGE) LOG we can call api fetch user info here,...
 (NOBRIDGE) LOG change numTime : 5
 (NOBRIDGE) LOG change numTime : 4
 (NOBRIDGE) LOG change numTime : 3
 (NOBRIDGE) LOG change numTime : 2
 (NOBRIDGE) LOG change numTime : 1
 (NOBRIDGE) LOG exit countdown and navigate to home
</code></pre>
Link : <a href="https://www.youtube.com/shorts/t9iAfVKLhvU" target="_blank" rel="noopener nofollow">https://www.youtube.com/shorts/t9iAfVKLhvU</a>

A place to share programming knowledge, where you can write in any language and connect with developers around the world. Sharing is a joy, and it brings knowledge to everyone.

Non-Blocking in React & React Native