> For the complete documentation index, see [llms.txt](https://tkssharma.gitbook.io/react-training/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tkssharma.gitbook.io/react-training/day-04/quick-recap-on-lifecycle.md).

# Quick Recap on Lifecycle

#### Component cycles <a href="#id-3b11" id="id-3b11"></a>

There are multiple reasons a component might re-render, and in each of them different functions are called allowing the developer to update certain parts of the Component.‌

**Component creation**‌

The first cycle is the creation for component, which usually happens the first time a component is encountered in the parsed JSX tree:‌

![](https://cdn-images-1.medium.com/max/1600/1*A-w6Gd0DdgqkhF-jstYoTg.png)

**Component re-rendering due to re-rendering of the parent component**‌

![](https://cdn-images-1.medium.com/max/1600/1*DNNTps27uJ_YmhZZqClxAw.png)

**Component re-rendering due to internal change e.g. a call to`this.setState()`**&#x200C;

![](https://cdn-images-1.medium.com/max/1600/1*VwTaOozcyavpmBoLBbY9RA.png)

**Component re-rendering due to call to** **`this.forceUpdate`**&#x200C;

![](https://cdn-images-1.medium.com/max/1600/1*herMU9doYvK-nQaqTPM6lQ.png)

**Component re-rendering due to catching an error**‌

Introduced in React 16 as “ErrorBoundaries”. A component can define a special layer which can catch errors and provide a new life-cycle method — `componentDidCatch` - which allows developers to provide self-repair actions for recovery or graceful handling of errors.

![](https://cdn-images-1.medium.com/max/1600/1*FS-CKtFsDPZ8L1FWfx5MWg.png)