diff --git a/src/data/question-groups/react/content/component-lifecycle.md b/src/data/question-groups/react/content/component-lifecycle.md new file mode 100644 index 000000000..f287088b9 --- /dev/null +++ b/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]); + ``` diff --git a/src/data/question-groups/react/react.md b/src/data/question-groups/react/react.md index 012c14337..df8d4fe0a 100644 --- a/src/data/question-groups/react/react.md +++ b/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' ---