Courses Interviews Blogs

Component Lifecycle Phases

Each component has several lifecycle phases that you can leverage to run code at particular times in the process. The three phases are: Mounting, Updating, and Unmounting. Mounting: Mounting is the phase of the component lifecycle when the initialization of the component is completed and the component is mounted on the DOM and rendered for the first time on the webpage. Updating: A component is updated whenever there is a change in the component's state or props. Unmounting: This is the final phase of the lifecycle of the component that is the phase of unmounting the component from the DOM.

Conditional Rendering

React

Component Lifecycle Phases

Loading video...

Lifecycle Phases in React (in Hindi)

Concepts

1

Lifecycle Phases in React (in Hindi)

Lifecycle Phases in React (in Hindi)

2

useEffect in React (in Hindi)

useEffect in React (in Hindi)

3

Cleanup in useEffect (in Hindi)

Cleanup in useEffect (in Hindi)

Watch the full video to earn 3

DevCoin image

Quizzes

1

Which of these is a phase of the component lifecycle? Select all that apply.

Mounting

Updating

Unmounting

Event handling

Question 1 of 10

1

DevCoin image

per question

2

What's the best place to perform side effects in functional components?

Directly inside component body.

Outside functional component.

Inside useEffect hook.

We should not perform side effects in functional components.

Question 1 of 10

1

DevCoin image

per question

3

Component is mounted every time it rerenders.

True

False

Question 1 of 10

1

DevCoin image

per question

4

Side effect function in useEffect is always called after component has rendered.

True

False

Question 1 of 10

1

DevCoin image

per question

5

Which of these is an example of side effects in functional components? Select all that apply.

const teenagers = allUsers.filter((user) => user.age >= 13 && user.age <= 19)

document.addEventListener("click", clickHandlerFunction)

setTimeout(callback, 5000)

fetch("https://dev11.in").then((data) => setData(data))

Question 1 of 10

1

DevCoin image

per question

6

What's true about the code below? Select all that apply.

function Component({ someRandomProps }) {
  const [count, setCount] = useState(0)

  document.title = count

  return <button onClick={() => setCount(count + 1)}>Increment</button>
}

It's better to update document title inside useEffect with count in dependency array.

When the component rerender due to change in props, document title will be updated.

Setting document title is a DOM manipulation and can be considered as a side effect.

document.title = count will cause rerendering of component.

Question 1 of 10

1

DevCoin image

per question

7

What's wrong with the code below?

function Component() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log("I am called after component has rendered")
  })

  return <button onClick={() => setCount(count + 1)}>Increment</button>
}

useEffect is missing dependency array.

Cleanup function is missing in useEffect.

Bruh, there's nothing wrong here.

Question 1 of 10

1

DevCoin image

per question

8

Which of the following statements are true about useEffect and side effects? Select all that apply.

Side effects run after component is rendered for the first time

Side effects run after component is rerendered

Side effects run before component unmounts

Dependency array can used to control the execution of useEffect

Empty array is not a valid dependency array

Question 1 of 10

1

DevCoin image

per question

9

If the side effect in useEffect is executing on every rerender, what are some of the possible reasons? Select all that apply.

We did not pass any dependency array

The values in dependency array have changed

That's jsut how useEffect works, it always run side effect whenever component rerenders

It's impossible to have such case and useEffect is acting crazy!

Question 1 of 10

1

DevCoin image

per question

10

Which of the following statements are true about useEffect and cleanup function? Select all that apply.

Cleanup function run before component unmounts

Cleanup function from previous render will run before re-rendering and after that new side effect will be executed

Cleanup function run immediately after side effect

Cleanup function is mandatory to use

Question 1 of 10

1

DevCoin image

per question

Coding Questions

	useEffect to update DOM	easy	1
	useEffect to set timer	medium	2
	Prevent infinite updates in useEffect	medium	2
	Cleanup in useEffect	medium	2

Courses FAQs Contact Us Privacy Policy Terms Of Service

Copyright © 2023 opendevs

Learn ● Develop ● Ace

All illustrations by Storyset