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