Why I use React 18 and createRoot in my PCF controls

The problem

Many PCF samples call ReactDOM.render() inside updateView(). With React 16 and that pattern, the whole tree is torn down and rebuilt every time the form notifies a change.

You barely notice it with simple components, but Fluent UI components that depend on @fluentui/react-positioning (such as Combobox or Dialog) can crash reproducibly: the dropdown loses its anchor in the middle of an interaction.

The fix

• Create the root once in init() with createRoot.
• In updateView(), just call root.render(...) with the new props: React reconciles instead of rebuilding.
• Unmount in destroy() with root.unmount().

init(context, notify, state, container) {
  this.root = createRoot(container);
}
updateView(context) {
  this.root.render(<CountryPicker {...props} />);
}
destroy() {
  this.root.unmount();
}

A small change that removes a whole family of hard-to-diagnose bugs.