Siku ya 5 ya Kujifunza React: Batching na Functional Updates

Nilidhani kuitumia state setter mara nyingi kunasababisha renders nyingi.

Nilikuwa nimekosea.

React ina akili zaidi kuliko hivyo. Inatumia mchakato unaoitwa Automatic Batching.

Badala ya kufanya render baada ya kila update, React inaziunganisha pamoja. Inakusanya updates zote na kufanya render moja tu. Hii huongeza ufanisi (performance).

Hapa kuna nilichojifunza leo.

The Batching Process Unapofanya kazi na state functions nyingi, React hufuata mtiririko huu:

  • State updates nyingi hutokea.
  • React inaziunganisha (batches) pamoja.
  • React inafanya render moja.
  • React inatekeleza mabadiliko kwenye UI.

The Problem with Standard Updates Nilijaribu kodi hii:

setCount(count + 1);
setCount(count + 1);
setCount(count + 1);

Nilitegemea count iende kutoka 0 hadi 3. Iliendelea kutoka 0 hadi 1 tu.

Hii hutokea kwa sababu setCount(count + 1) haimaanishi "ongeza count." Inamaanisha "weka count iwe thamani hii mahususi."

Ikiwa count ni 0, kila mstari unaiambia React iweke count iwe 1. React inaziunganisha hizi na kuona kuwa maelekezo ya mwisho ni kuweka count iwe 1.

The Solution: Functional Updates Ili kurekebisha hili, lazima utumie functional update. Hii hutumia state ya hivi karibuni iliyopo kwenye update queue.

Njia sahihi:

setCount((prev) => prev + 1);

Unapotumia mfumo huu, React inampa kila update thamani ya hivi karibuni zaidi.

  • Update ya kwanza: 0 + 1 = 1
  • Update ya pili: 1 + 1 = 2
  • Update ya tatu: 2 + 1 = 3

Sasa counter inafika 3 kweli.

A Common Mistake Wakati mmoja niliandika:

setCount((prev) => { prev + 1 });

Counter ikawa undefined. Unapotumia mabano ya wazi {} kwenye arrow function, lazima utumie neno return. Tumia hii badala yake:

setCount((prev) => prev + 1);

Key Takeaways:

  • React inaziunganisha (batches) state updates nyingi ili kuongeza kasi.
  • Wito wa setState si kwamba kila mara husababisha renders za papo hapo.
  • Standard updates hutumia thamani kutoka kwenye render cycle ya sasa.
  • Functional updates hutumia state ya hivi karibuni kutoka kwenye update queue.
  • React inatumia Update Queue ya ndani kusimamia mabadiliko haya.

Source: https://dev.to/bismay-exe/day-5-of-learning-react-understanding-automatic-batching-functional-updates-397k