لماذا لا يقوم React بتحديث المتغيرات عندما تتغير فعليا !

ادي بصة كدة علي الكود دة وحاول تتوقع اية الرقم اللي هيظهر بعد ما تدوس علي الزرار

export default function Counter() {

const [number, setNumber] = useState(0);

return (

<>

<h1>{number}</h1>

<button onClick={() => {

setNumber(number + 1);

setNumber(number + 1);

setNumber(number + 1);

}}>+3</button>

</>

)

}

لو توقعت ان الرقم هيزيد 3 كل مرة فانت راجل منطقي وفاهم #javascript كويس .. بس مش فاهم #React 😂

في #جافاسكريبت قيمة ال variable هتتغير 3 مرات

اما في react الموضوع هنا مختلف شوية, في كل مرة هتعمل setNumber هتكون قيمة number الحالية هي قيمتها في ال state بتاع ريأكت .. بمعني اخر هتكون 0 كل مرة

ومع كل setNumber هتنادي عليها هتكون القيمة كل مرة = 1 .. مش هتزيد 1 عن اللي قبلها زي مانت توقعت

طب لو حبينا ننفذ نفس الكود دة بالظبط بس نوصل للنتيجة اللي احنا متوقعينها؟ يعني ننادي setNumber 3 مرات واخر واحدة هتكون قيمة number =3

هنا بأة في تريكاية بسيطة هنتعلمها وهي اننا بدل ما نحط قيمة number الجديدة كقيمة, هنحطها ك updater function زي كدة

setNumber(n => n+1)

عدل الكود وجرب مرة تانية كدة!