React Inaposema Re-render, Inamaanisha Mambo Matatu
Unapoita setState, React haifanyi tu update ya DOM. Inatekeleza awamu tatu tofauti kwa mfuatano. Watengenezaji wengi huchanganya awamu hizi. Kuelewa tofauti hii kunakusaidia kutatua matatizo ya utendaji (performance).
Awamu Tatu:
• Render: React huiita function ya component yako. • Reconcile: React inalinganisha matokeo mapya na yale ya zamani. • Commit: React inatekeleza mabadiliko kwenye DOM.
- Awamu ya Render
React huendesha function yako. Inatumia props za sasa. Function hiyo hurudisha JSX. JSX hii ni orodha tu ya JavaScript objects. Watu huiita virtual DOM. Sio DOM halisi. Ni maelezo ya jinsi UI inavyopaswa kuonekana. Bado hakuna kitu kinachoonekana kwenye kioo. Awamu hii ni hesabu na mantiki (logic) tupu.
- Awamu ya Reconcile
React huweka mti (tree) wa zamani na mti mpya. Inatafuta tofauti kati yao. Ikiwa aina ya element inabadilika, React inabadilisha mti mzima. Ikiwa ni props tu zinazobadilika, React huzifanyia update. Hapa ndipo keys zinapohitajika. Keys husaidia React kuoanisha vitu kwenye orodha kwa kutumia utambulisho (identity) badala ya nafasi. Awamu hii hutengeneza orodha ya hatua za chini kabisa zinazohitajika ili kufanya update ya DOM.
- Awamu ya Commit
React huchukua orodha ya mabadiliko na kugusa DOM halisi. Inatengeneza nodes mpya na kuondoa zile za zamani. Hapa ndipo watumiaji wanapoona mabadiliko kwenye kioo. Baada ya hapa, kivinjari (browser) huchora kioo. Kisha, useEffect huendeshwa.
Imani Potofu za Kawaida:
• Re-render haibadili kila wakati DOM. Ikiwa matokeo ni yale yale, React haifanyi kitu katika awamu ya commit. • React.memo huacha wito wa function (function call). Haiachi update ya DOM. • Props hazichochei re-renders. Re-render ya mzazi (parent) huchochea mtoto (child). Mabadiliko ya prop ni matokeo tu.
Jinsi ya Kurekebisha Utendaji (Performance):
Ikiwa function yako ni nzito/polepole, una tatizo la Render. Hamisha kazi nzito nje ya function au tumia memoization.
Ikiwa React inajenga upya orodha kubwa, una tatizo la Reconcile. Angalia keys zako.
Ikiwa DOM inafanya update mara nyingi sana, una tatizo la Commit. Tumia virtualization au badilisha muundo wako.
React 19 na React Compiler sasa zinashughulikia sehemu kubwa ya kazi hii kwa ajili yako. Lakini kujua awamu hizi kunakusaidia kufanya debugging vizuri zaidi.