# Lifecycle Methods

## Component Lifecycle Methods

WebComp provides the exact same lifecycle methods as [React](https://reactjs.org/docs/react-component.html#the-component-lifecycle):

| Method Name                       | When is it called?                                                                                                                                              |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `componentWillMount`              | Before the component gets mounted to the DOM                                                                                                                    |
| `componentDidMount`               | After the component gets mounted to the DOM                                                                                                                     |
| `componentWillUnmount`            | Before component is removed from the DOM                                                                                                                        |
| `componentWillReceiveProps`       | Before new props are accepted                                                                                                                                   |
| `static getDerivedStateFromProps` | Right before render(), both on the initial mount and on subsequent updates                                                                                      |
| `shouldComponentUpdate`           | Before render() is called. Return \`false\` to prevent render                                                                                                   |
| `getSnapshotBeforeUpdate`         | Before the most recently rendered output is committed to the DOM. Any value returned by this lifecycle will be passed as a parameter to `componentDidUpdate()`. |
| `componentWillUpdate`             | Before render()                                                                                                                                                 |
| `componentDidUpdate`              | After render()                                                                                                                                                  |

***Note:** Lifecycle methods don't work in stateless components and string render.*

## Element Lifecycle Methods

In addition to component lifecycle, WebComp also provides lifecycle methods for custom element itself.

Keep in mind that these are for the elements themselves, not underlying Preact component instances, so all these methods are **`static`**.

| Method Name             | When Is It Called?                                                              |
| ----------------------- | ------------------------------------------------------------------------------- |
| `elementDidCreate`      | Immediately after custom element was initialized in the scope of the page       |
| `elementWillConnect`    | When an element is about to get added to the DOM                                |
| `elementDidConnect`     | Once an element has been connected to the DOM (content may not be rendered yet) |
| `elementWillDisconnect` | Before component is disconnected from the DOM                                   |
| `elementDidDisconnect`  | Once component has been disconnected from the DOM                               |
| `elementDidRender`      | Element's contents were rendered                                                |