# Lab: Component LifeCycle

## ![](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) Lab: React Lifecycle Methods

Much like other things you've dealt with you may want to do certain actions based on events in the "life" of a React component. Perhaps you want to do something after a component is loaded for the first time or after it updates.

Think about things like Sequelize hooks, JavaScript classes, or DOM events. For example, Sequelize's `beforeCreate` hook allows you to run some code before a new entry goes into your SQL table. In the same way, React components allow you to tap into their own lifecycle methods. They sometimes have long, intimidating sounding names, which you'll have to get used to!

## The Big Three (or Four)

React components have 3 overarching categories that the lifecycle methods fit into. Some lifecycle events may overlap multiple categories. These categories are `Mounting`, `Updating`, and `Unmounting`. Sometimes you will see `Mounting` broken out into `Initialization` and `Mounting` as it is in this [medium article](https://medium.freecodecamp.org/how-to-understand-a-components-lifecycle-methods-in-reactjs-e1a609840630).

### Mounting

This is the birth of a React component. Any lifecycle event that takes place around the component coming into existence fits here:

* constructor
* componentDidMount
* render

### Updating

This is basically any change or event that happens to the component that doesn't have to do with its birth or death:

* getDerivedStateFromProps
* shouldComponentUpdate
* getSnapShotBeforeUpdate
* componentDidUpdate
* render

### Unmounting

This is when your component is about to shuffle off its mortal coil. When it passes to the code beyond and pushes up binary daisies. Only one lifecycle method is generally used here:

* componentWillUnmount

The reason you might use this is to clean up any open connections or free any memory in use. In object-oriented languages this is normally done in a `destructor` method - i.e., the opposite of the `constructor`.

## Lifecycle Methods Chart

![](https://res.cloudinary.com/briezh/image/upload/v1556220396/React-Lifecycle_bwt2dv.png)

[Image credit to programmingwithmosh.com](https://programmingwithmosh.com/javascript/react-lifecycle-methods/)

## Directions

### 1. Your instructor will assign you one or two lifecycle methods listed below.

Note that these methods may be deprecated. If so, why was it deprecated and what replaced it?

### 2. Study what your methods do in-depth and know what part of the lifecycle they happen in - mounting, updating, or unmounting

### 3. Prepare a short presentation for your classmates regarding your assigned lifecycle methods.

Your presentation doesn't have to be long, but it should minimally include:

* A definition
* Which part of the 3 parts of the lifecycle does it occur in
* A code example or an explanation of a scenario when the lifecycle method would be used

## Lifecycle Methods List

* constructor
* componentDidMount
* getDerivedStateFromProps
* shouldComponentUpdate
* getSnapShotBeforeUpdate
* componentDidUpdate
* render
* componentWillUnmount
* componentWillReceiveProps ([deprecated - here's why](https://hackernoon.com/replacing-componentwillreceiveprops-with-getderivedstatefromprops-c3956f7ce607))

## Resources

* [Medium - Understanding Lifecycle Methods](https://medium.freecodecamp.org/how-to-understand-a-components-lifecycle-methods-in-reactjs-e1a609840630)
* [Why componentWillReceiveProps is Deprecated](https://hackernoon.com/replacing-componentwillreceiveprops-with-getderivedstatefromprops-c3956f7ce607)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tmdarneille.gitbook.io/seirfx/16-react/react-lifecycle/lifecycle-exercise.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.