# Day 14 Exit Ticket Solutions: React Lifecycle

Refer to [React Lifecycle Diagram](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)

## In your own words, what is the React Lifecycle?

Each component in React has a lifecycle which you can monitor and manipulate during its three main phases.

The three phases are:
* Mounting
* Updating
* Unmounting

Right before, the mounting phase, you can also say there is an "initialization" stage, where we declare somethings (such as state) in the constructor

Mounting means that the component has been converted to real DOM nodes and have been placed on the DOM and its elements are rendered on the web page.

For more details, check out this [diagram](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)

## What lifecycle method is the best place to make AJAX calls?

`componentDidMount`

It runs only once** during the component lifecycle, so it is a good place to set up subscriptions, and getting initial data from the server.

- [Talks about `componentDidMount` running multiple times](https://linguinecode.com/post/understanding-react-componentdidmount)
- [React.js Docs: `componentDidMount`](https://reactjs.org/docs/react-component.html#componentdidmount)

## Which of the following statements is true about the Virtual DOM?

The Virtual DOM is a big JS object representing the DOM tree that's used internally by React

* [Reactjs Docs: Virtual DOM](https://reactjs.org/docs/faq-internals.html)
* [Reactjs Doc: Reconcilation](https://reactjs.org/docs/reconciliation.html)

## Choose the correct order of the React Lifecycle

ReactDOM.render -> render -> mounted component -> componentDidMount

*Remember*: An initial render happens before the component mounts. Check our example [demo](https://github.com/FullstackAcademy/2101-FSA-RM-WEB-FT-react-lifecycle-demo/tree/end)

## Why do we need the key prop when we map over lists?

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity

[Reactjs Docs: Keys and Lists](https://reactjs.org/docs/lists-and-keys.html#keys)

## What lifecycle method is called when the mounted component is removed?

`componentWillUnmount`

This is a good place to remove any event listeners, intervals, timers, etc. that we initialized that React doesn't have control over

[Reactjs Docs: `componentWillUmmount`](https://reactjs.org/docs/react-component.html#componentwillunmount)