Lifecycle Methods

Component Lifecycle Methods

WebComp provides the exact same lifecycle methods as React:

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

‚Äč