How to Handle Intermittent Null Values During PCF Control Initialization#

Problem with PCF Controls on Initialization#

There is a common issue when developing PCF controls, where the control loads before the form data is fully available. This causes the control to render with empty values even when data exists in the fields.

How to fix this rendering issue with undocumented isPropertyLoading Property#

The isPropertyLoading property is a boolean value passed through the PCF context that indicates whether the form properties are still loading:

💡Returns true while the form is loading

💡Returns false when the form is loaded and the field values are available

Implementation Solution#

Implement conditional rendering using isPropertyLoading:

public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
    //@ts-ignore
    let isPropertyLoading:boolean = context.parameters.textField.isPropertyLoading;
    
    if(!isPropertyLoading){
        // Render your actual component when data is ready
        const props: IAutoCompleteUIProps = {
            searchValue: context.parameters.textField.raw!,
        }
        return React.createElement(AutoCompleteUI, props);
    }
    else {
        // Return empty element
        return React.createElement("div");
    }
}

Conclusion#

This approach ensures the control only renders when the data is actually available, preventing empty displays during initial load.