Core SPFx Web Part Lifecycle Methods

 

Method	Runs When	Main Purpose
constructor()	When class instance is created	Initialize variables, defaults
onInit()	Before first render	Async setup, PnPjs config, initial data fetch
render()	Every time the web part renders	Display UI on page
onAfterRender()	After render completes	Optional DOM manipulations or event attachments
onDispose()	When web part is removed from page	Cleanup (timers, event handlers, etc.)

Page Loads

   │

   ▼

┌───────────────────────┐

│   constructor()        │

│ - Runs once            │

│ - Initialize variables │

│ - Set default values   │

│ ❌ SPFx context NOT ready │

└───────────────────────┘

   │

   ▼

┌───────────────────────┐

│   onInit()             │

│ - Runs once before render │

│ - Async setup allowed      │

│ - Configure PnPjs          │

│ - Fetch initial data       │

│ ✅ SPFx context available   │

└───────────────────────┘

   │

   ▼

┌───────────────────────┐

│   render()             │

│ - Draws UI to DOM      │

│ - Can be called multiple times │

│ ✅ SPFx context available        │

└───────────────────────┘

   │

   ▼

┌───────────────────────┐

│   onAfterRender()      │

│ - Optional             │

│ - Manipulate DOM after render │

│ - Attach event handlers        │

└───────────────────────┘

   │

   ▼

User edits properties → getPropertyPaneConfiguration() → render() updates

   │

   ▼

┌───────────────────────┐

│   onDispose()          │

│ - Clean up timers, events │

│ - Web part removed from page │

└───────────────────────┘

Flow Summary

1. constructor() → “Set up internal stuff, no SPFx context”

2. onInit() → “Do SPFx-aware async setup (PnPjs, fetch data)”

3. render() → “Display the web part UI”

4. onAfterRender() → “Optional DOM manipulation after render”

5. onDispose() → “Cleanup when web part is removed”