Hooks

A component has three life-cycle events:

• CREATE: this is when the component function is called and it creates its corresponding DOM elements.
• BIND: this is when created DOM elements are added to the main document (and appear on screen).
• CLEAR: this is when created DOM elemenets are removed from the main document (and the screen).

These events are not unique to components:

1linkconst timer = interval(1000);

2link

3linkconst element = <div>You've been here for {timer} seconds!</div>;    // --> CREATE

4link

5linkrenderer.render(element).on(document.body);                          // --> BIND

6linkrenderer.remove(element);                                            // --> CLEAR

☝️ Here, the callbag timer is embedded into element during CREATE. It is subscribed to during BIND, so that content of element can be updated accordingly. This subscription is cleared on CLEAR.

Component hooks allow you to tap into these hooks in your component functions:

1linkexport function MyComponent(_, renderer) {

2link  this.onBind(() => alert('Binding element ...'));

3link  this.onClear(() => alert('Clearing element ...'));

4link

5link  return <h1>Hellow World!</h1>;

6link}

linkType Safety

It is recommended to type-annotate the this argument in TypeScript for further type-safety. For utilizing hooks, you can use LiveComponentThis interface for that purpose:

1linkimport { LiveComponentThis } from 'render-jsx/component/plugins';

2link

3linkexport function MyComponent(

4link  this: LiveComponentThis,

5link  ...

6link) {

7link  ...

8link}