closure & updates

سلام استاد گرامی خسته نباشید

برای یاد آوری کد من اون رو اینجا میگذارم:

import React, { useState, useEffect } from 'react'
export default function Count() {
   const [count, setCount] = useState(0)

   function increment() {
       setTimeout(() => {
           setCount(prevCount => prevCount + 1)
           console.log(count);
       }, 2000)
   }

   // function increment() {
   //     setTimeout(() =>{
   //        setCount(count+1)
   //         console.log(count);
   //     }, 2000)
   // }
   
   function decrement() {
       setTimeout(() => {
           setCount(count - 1)
       }, 2000)
   }
   useEffect(() => {
       console.log('effect');
   })
   return (
       <div className='counter'>
           <button onClick={decrement} className='bg-info'>-</button>
           <p className='count'>{count}</p>
           <button onClick={increment} className='bg-success'>+</button>
       </div>
   )
}

و حالا سوال:

آیا این خاصیت که در این حالت از کد:

function increment() {
       setTimeout(() =>{
          setCount(count+1)
           console.log(count);
       }, 2000)
   }

مقدار count در فراخوانی های بعدی increment همچنان همان مقدار قدیمی است مرتبط با بحث closure هاست؟

آیا میتوانیم نتیجه بگیریم که در هر بار render که در update  اتفاق می افتد متغیر های ما مانند count و توابع ما مانند increment و  decrementمجددا در مکانی دیگر از حافظه تعریف و مقدار دهی میشوند ؟

فرض می کنیم در زمان t=۰s increment فراخوانی شده و بعد در زمان t=۱.۵s مجددا فراخوانی شده باشد. در این صورت از زمان t=۲s به بعد ما دو مقدار برای count داریم؛ مقدار فعلی و مقدار قبلی که قرار است در t=۳.۵s چاپ شود. آیا این به آن معناست که اصلا از اول تابع setTimeout  بعنوان ورودی چنین چیزی گرفته:

(شما در قسمتی از ویدیو برای تفهیم مطلب اینطور نوشتید:)

   setTimeout(() =>{
       setCount(0+1)
        console.log(0);
    }, 2000)
        

    و یا اینکه دو تا مکان مجزا در حافظه  و دوتا count داریم؟