Docs / Component Lifecycle

Component Lifecycle

Understanding the lifecycle of a Snakeskin component is crucial for managing state and side effects.

The Lifecycle Diagram

  1. Initialization (__init__): Props are received, initial state is set.
  2. Mount (on_mount): Component is added to the DOM.
  3. Update (on_update): State or props change, re-render occurs.
  4. Unmount (on_unmount): Component is removed from the DOM.

Hooks

on_mount(self)

Called immediately after the component is inserted into the DOM.

python 
def on_mount(self):
    print("Component mounted!")
    self.fetch_data()

on_update(self, prev_props, prev_state)

Called when state or props change.

python 
def on_update(self, prev_props, prev_state):
    if self.state['count'] != prev_state['count']:
        print(f"Count changed to {self.state['count']}")

on_unmount(self)

Called just before component removal. Cleanup timers or subscriptions here.

python 
def on_unmount(self):
    clearInterval(self.timer)