wip: add component's lifecycle

src/data/question-groups/react/content/component-lifecycle.md

@@ -0,0 +1,30 @@
+In React functional components, lifecycle-like behaviors are achieved using hooks:
+
+1. **Mounting and Cleanup:**
+   Utilizing the useEffect hook with an empty dependency array ([]) ensures the hook runs after the component mounts to the DOM.
+
+   ```js
+   useEffect(() => {
+     // do something after component mounts
+     return () => {
+       // do something before component unmounts
+     };
+   }, []);
+   ```
+
+   The cleanup function returned within the useEffect callback offers a mechanism for handling tasks when the component is about to **unmount**.
+
+2. **Updating:**
+   The useEffect hook, when invoked without a dependency array or with specific dependencies, executes after every render or when specified prop/state changes are detected.
+
+   ```js
+   useEffect(() => {
+     // do something after every render
+   });
+   ```
+
+   ```js
+   useEffect(() => {
+     // do something after specific prop/state changes
+   }, [state1, state2]);
+   ```

src/data/question-groups/react/react.md

@@ -267,4 +267,9 @@ questions:
     topics:
       - 'Core'
       - 'Beginner'
+  - question: Describe the Client Component's lifecycle.
+    answer: component-lifecycle.md
+    topics:
+      - 'Core'
+      - 'Beginner'
 ---