Por qué uso React 18 y createRoot en mis controles PCF

El problema

Muchos ejemplos de PCF llaman a ReactDOM.render() dentro de updateView(). Con React 16 y ese patrón, todo el árbol se destruye y se vuelve a crear cada vez que el formulario notifica un cambio.

Con componentes sencillos no se nota, pero los de Fluent UI que dependen de @fluentui/react-positioning (como Combobox o Dialog) pueden fallar de forma reproducible: el desplegable pierde su ancla a mitad de una interacción.

La solución

• Crear la raíz una sola vez en init() con createRoot.
• En updateView(), limitarse a llamar a root.render(...) con las nuevas props: React reconcilia en lugar de reconstruir.
• Desmontar en destroy() con root.unmount().

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

Es un cambio pequeño que elimina una familia entera de errores difíciles de diagnosticar.