Pcf-Best-Practices

# Best Practices and Guidance for Code Components

Developing, deploying, and maintaining code components needs a combination of knowledge across multiple areas. This article outlines established best practices and guidance for professionals developing code components.

Power Apps Component Framework

Avoid Deploying Development Builds to Dataverse

Code components can be built in [production or development mode](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/code-components-alm#building-pcfproj-code-component-projects). Avoid deploying development builds to Dataverse since they adversely affect the performance and can even get blocked from deployment due to their size. Even if you plan to deploy a release build later, it can be easy to forget to redeploy if you don't have an automated release pipeline. More information: [Debugging custom controls](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/debugging-custom-controls).

Avoid Using Unsupported Framework Methods

These include using undocumented internal methods that exist on the `ComponentFramework.Context`. These methods might work but, because they're not supported, they might stop working in future versions. Use of control script that accesses host application HTML Document Object Model (DOM) isn't supported. Any parts of the host application DOM that are outside the code component boundary, are subject to change without notice.

Use `init` Method to Request Network Required Resources

When the hosting context loads a code component, the `init` method is first called. Use this method to request any network resources such as metadata instead of waiting for the `updateView` method. If the `updateView` method is called before the requests return, your code component must handle this state and provide a visual loading indicator.

Clean Up Resources Inside the `destroy` Method

The hosting context calls the `destroy` method when a code component is removed from the browser DOM. Use the `destroy` method to close any `WebSockets` and remove event handlers that are added outside of the container element. If you're using React, use `ReactDOM.unmountComponentAtNode` inside the `destroy` method. Cleaning up resources in this way prevents any performance issues caused by code components being loaded and unloaded within a given browser session.

Avoid Unnecessary Calls to Refresh on a Dataset Property

If your code component is of type dataset, the bound dataset properties expose a `refresh` method that causes the hosting context to reload the data. Calling this method unnecessarily impacts the performance of your code component.

Minimize Calls to `notifyOutputChanged`

In some circumstances, it's undesirable for updates to a UI control (such as keypresses or mouse move events) to each call `notifyOutputChanged`, as more calls would result in many more events propagating to the parent context than needed. Instead, consider using an event when a control loses focus, or when the user's touch or mouse event completes.

Check API Availability

When developing code components for different hosts (model-driven apps, canvas apps, portals), always check the availability of the APIs you're using for support on those platforms. For example, `context.webAPI` isn't available in canvas apps. For individual API availability, see [Power Apps component framework API reference](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/).

Manage Temporarily Null Property Values Passed to `updateView`

Null values are passed to the `updateView` method when data isn't ready. Your components should account for this situation and expect that the data could be null, and that a subsequent `updateView` cycle can include updated values. `updateView` is available for both [standard](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/control/updateview) and [R