What is a web part?
A web part is a reusable visual object that a page author can add to their content, and customize using a property pane.
In SPFx web parts the lifecycle refers to the sequence of events or methods that are executed during the web part's initialization, rendering, and disposal. The SPFx web part lifecycle integrates both core SPFx methods and the standard React component lifecycle methods.
When building a SPFx web part using React, two lifecycles are involved:
- SPFx WebPart Lifecycle
- React Component Lifecycle
I have created a simple react based webpart which displays logged-in user name and webpart edit property. On button click the number gets incremented by one.
SPFx WebPart Lifecycle
The SPFx framework has its own lifecycle methods for the web part class (instance) in the .ts file, which interact with the React Component.
Web part Base Class - defines the main entry point for the web part. Extends the BaseClientSideWebPart. All client-side web parts must extend the BaseClientSideWebPart class to be defined as a valid web part.
export default class SpFxWebpartLifecycleWebPart extends BaseClientSideWebPart <ISpFxWebpartLifecycleWebPartProps>
BaseClientSideWebPart class - This abstract class implements the base functionality for a client-side web part. Every client-side web part needs to inherit from this class.
Extends BaseWebPart<TProperties>
Along with the base functionality, this class provides some APIs that can be used by the web part. These APIs fall in two categories.
The first category of APIs provide data and functionality. Example, the web part context (i.e. this.context). This API should be used to access contextual data relevant to this web part instance.
The second category of APIs provide a base implementation for the web part lifecycle and can be overridden for an updated implementation. The render() API is the only API that is mandatory to be implemented/overridden by a web part. All other life cycle APIs have a base implementation and can be overridden based on the needs of the web part.
The main SPFx lifecycle methods are:
| SPFx Method | Purpose |
|---|---|
| constructor() | Constructor for the BaseClientSideWebPart class. Initialize the web part class (services, variables). React is not yet mounted. |
| onInit() | This event method is called when the web part is initialized. Returns a Promise. Use it for async initialization (fetching data, setting context). |
| render() | This API is called to render the web part. There is no base implementation of this API and the web part is required to override this API. Creates and renders the React component in DOM with ReactDom.render(). |
| onDispose() | This API should be used to refresh the contents of the PropertyPane. Cleanup (unmount React with ReactDom.unmountComponentAtNode). Called when the web part is removed from the page. |
You can find SPFx lifecycle Properties and Methods detail here
React Component Lifecycle
Within the main SPFx web part render method, a React component is mounted. This component is defined in .tsx file which follows its own lifecycle.
React.Component - Component is the base class for the React components defined as JavaScript classes. To define a React component as a class, extend the built-in Component class and define a render method. Only the render method is required, other methods are optional.
export default class SpFxWebpartLifecycle extends React.Component<ISpFxWebpartLifecycleProps, ISpFxWebpartLifecycleState>
The main React component lifecycle methods are:
| React Method | Purpose |
|---|---|
| constructor() | Initialize state and bind event handlers |
| render() | Returns the JSX/TSX (UI structure) to be rendered |
| componentDidMount() | Called after the component is inserted into the DOM. This is the ideal place for API calls to fetch data from sources like SharePoint lists. |
| shouldComponentUpdate(nextProps, nextState, nextContext) | To optimize the re-rendering process by allowing React to skip the re-render if props or state has changed. |
| componentDidUpdate(prevProps, prevState, snapshot?) | Called after the component’s props or state have been updated. Use this to perform side effects or re-fetch data based on specific prop/state changes. |
| componentWillUnmount() | Called just before the component is removed from the DOM. Essential for clean-up of resources, such as removing event listeners or cancelling network requests. |
You can find React Component methods here
In the SPFx react webpart the methods are defined and a console log statement is added to track the webpart lifecycle flow.
Lets add a webpart on the page and check the behavior.
Event: Page load
On Page load the webpart is displayed. The both SPFx lifecycle and React component lifecycle events are triggered.
Event: Button click/State change
Click on the "Increment My Number" button and this will increment the number by 1 on every click. Here state value gets updated. React responds to state/prop changes by re-rendering react component. The SPFx lifecycle events will not get executed and only React component lifecycle events are triggered.
Event: Page edit mode
The both SPFx lifecycle and React component lifecycle events are triggered.
This event first removes/disposes the webpart component. The SPFx onDispose method simply calls ReactDom method ReactDom.unmountComponentAtNode(this.domElement) - it removes a mounted React component from the DOM and clean up its event handlers and state.
This event first removes/disposes the webpart component. The SPFx onDispose method simply calls ReactDom method ReactDom.unmountComponentAtNode(this.domElement) - it removes a mounted React component from the DOM and clean up its event handlers and state.
In addition, unmounting a component also triggers the React componentWillUnmount() lifecycle method. This method is often used to perform any necessary cleanup, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount.
protected onDispose(): void {
ReactDom.unmountComponentAtNode(this.domElement);
}
Once the webpart component is unmounted then again the webpart is rendered and mounted. Here the lifecycle is similar to the page load event.
Event: Edit WebPart/Open Property Pane
On editing webpart properties (opening property pane) - only the SPFx lifecycle events are triggered.
The loadPropertyPaneResources() method only gets called once. If you close the property pane and re-open then this method will not get call. It will only be called again if you reload the page and then open property pane.
The getPropertyPaneConfiguration() method will get executed twice. It's happening because of the reactive property pane interaction mode. When a property value changes (e.g. in a PropertyPaneTextField), the framework often re-evaluates the entire property pane configuration to determine if other fields need to be updated, hidden, shown, or disabled based on the new value.
Event: WebPart Property Pane closed
When webpart property pane is closed SPFx onPropertyPaneConfigurationComplete() method is called. This method will be trigger whether properties are changed or not. Only one SPFx lifecycle event is triggered.
Event: WebPart property change
When property pane field value changes. SPFx detects property changes and updates the web part. React responds to state/prop changes by re-rendering react component. The both SPFx lifecycle and React component lifecycle events are triggered.
The getPropertyPaneConfiguration() and onPropertyPaneRendered() method will get executed twice. It's happening because of the reactive property pane interaction mode. The default behavior is Reactive.
I hope this will help all of you! 🧲
Feel free to provide feedback.
🚀 "Happy Coding" 🚀
No comments:
Post a Comment