React Component Lifecycle

React Component Lifecycle

Component Lifecycle කියන්නේ මොකක්ද?

Lifecycle කියන්නේ Component එකක් නිර්මාණය වෙලා (create), update වෙලා, අවසානයේ ඉවත් වෙන (destroy/remove) තෙක් සිදුවන සියලුම අදියර.

React Component එකක් ජීවිත කාලය තුළ අදියර 3ක් තියෙනවා.

Mounting

Updating

Unmounting

1. Mounting

Component එක මුල් වරට Screen එකට render වෙන අවස්ථාව.

<Home />

Home component එක පළවෙනි වතාවට render වෙනවා.

Functional Component වල මේ අවස්ථාවේ useEffect(() => {}, []) එක run වෙනවා.

API Call කරන්න හොඳම තැන

සාමාන්‍යයෙන් API call එකක් කරන්නෙ Mounting එකේ.

[] dependency array එක හිස් නිසා

පළවෙනි render එකේ විතරයි run වෙන්නේ.

Real Example

Facebook Profile එක open කරනවා.

2. Updating

Component එක mount වෙලා ඉවර වුණාට පස්සේ

State හෝ Props වෙනස් වුණොත් Component එක නැවත render වෙනවා.

age වෙනස් වෙන හැම වෙලාවෙම run වෙනවා.

3. Unmounting

Component එක screen එකෙන් ඉවත් වෙනවා.

මේකෙදි අනිවාර්යයෙන් cleanup functions ඕනිවෙනවා.

Cleanup Function

Unmount වෙන වෙලාවේ

Timer stop කරන්න

Subscription remove කරන්න

WebSocket close කරන්න

Event Listener remove කරන්න

API cancel කරන්න

Cleanup නැත්නම් මොකද වෙන්නේ?

Timer එකක් හිතන්න.

continue වෙනවා.

Memory leak එකක් වෙනවා.

Unmount වෙනකොට timer එක stop වෙනවා.

useEffect(() => {}, []) එක run වෙන්නේ කොයිවෙලාවටද?

Component එක mount වෙන විට එක වරක් පමණක් run වෙනවා.

useEffect(() => {}) (dependency array නැතුව) run වෙන්නේ කොයිවෙලාවටද?

• පළමු render එකේ
• ඊට පස්සේ සෑම re-render එකකම

useEffect(() => {}, [count]) run වෙන්නේ කවදාද?

• Component mount වෙන විට
• count value එක වෙනස් වන සෑම අවස්ථාවකම

Cleanup function එක run වෙන්නේ කොයිවෙලාවටද?

• Component එක unmount වෙන විට
• එම useEffect එක නැවත run වීමට පෙර (dependencies වෙනස් වුණොත්)

User form එක open කළාම API call කරනවා (mount), field value වෙනස් වුණාම component update වෙනවා (update), page එකෙන් ඉවත් වුණාම subscriptions හෝ timers cleanup කරනවා (unmount)