Component lifecycle events

WeWeb components have different stages in their life - from appearing on a page to being removed. At each stage, you can make things happen automatically using lifecycle events.

Think of lifecycle events as specific moments when you can trigger actions in your component. They help you control exactly when things should happen, making your components smarter and more automated.

The Events and Their Use Cases

On execution

Runs when you execute it within a workflow. Example workflows:

• Shopping Cart - Add Item To Cart

1. Updating the cart count
2. Trigger an animation
3. Show a success message

• Multi-step Form - Change Step

1. Validate current step data
2. Show any error messages
3. Move forward or highlight issues

• Data Table - Change Sorting

1. Update display order
2. Show loading state
3. Refresh data view with new sorting

On mounted

Runs after your component is fully loaded on the page. Example workflows:

• Analytics Dashboard - Load User Data

1. Start automatic refresh cycles
2. Set up chart displays
3. Mark as ready to render

• Content Feed - Load First Posts

1. Set up infinite scroll detection
2. Prepare layout grid
3. Mark component as fully placed

• Chat Widget - Connect To Message Service

1. Load recent conversation history
2. Start listening for new messages
3. Mark chat as ready for use

On created

Runs when component first appears. Example workflows:

• Dynamic Form - Set Up Default Values

1. Determine visible fields based on permissions
2. Prepare validation rules

• Product Configurator - Initialize Starting Options

1. Set default pricing
2. Prepare configuration rules

• Calendar View - Set Initial Date Range

1. Determine view type (month/week/day)
2. Prepare event placeholders

Before unmount

Runs right before removing the component. Example workflows:

• Document Editor - Check For Unsaved Changes

1. Offer to save draft
2. Clear temporary storage
3. Stop auto-save processes

• Video Player - Save Current Timestamp

1. Clean up media resources
2. Remove keyboard shortcuts
3. Clean streaming connections

• Game Component - Save Current Game State

1. Clear intervals
2. Remove event listeners
3. Stop all animations

On property change

Runs when component properties update. Example workflows

• Pricing Calculator - Quantity Changed

1. Update product options
2. Change shipping method
3. Recalculate totals
4. Update tax calculations
5. Refresh delivery dates

• Custom Chart - Data Source Updated

1. Refresh visualizations
2. Resize chart elements
3. Update legends
4. Adjust responsive layout

• Filtered List - Filter Criteria Changed

1. Update displayed items
2. Refresh sorting
3. Update URL parameters
4. Maintain scroll position

Real-World Example: Advanced Profile Editor Component

See how different events work together in a profile management system:

1. On created

• Set up empty form structure
• Initialize validation rules
• Prepare image upload handlers
• Set default privacy settings

2. On mounted

• Load user's current profile data
• Fetch profile picture
• Check user permissions
• Set up auto-save functionality
• Initialize change tracking

3. On property change

• Validate new input values
• Update character counts
• Check username availability
• Trigger auto-save if needed
• Update preview displays

4. Before unmount

• Save any unsaved changes
• Clear temporary image uploads
• Remove auto-save intervals
• Clean up open media selections

5. On execution

• Handle profile updates
• Process image uploads
• Show success/error messages
• Update user interface states

Choose the right event based on when you need actions to occur in your component's lifecycle. This ensures your components behave exactly as intended at every stage.