WebComp
Search…
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
Last modified 2yr ago