Cómo recrear el estado de un componente de React

Escenario

Tenemos una aplicación web usando React 15.6.2. Todo va bien hasta que un nuevo módulo para una nueva funcionalidad requiere una versión >= 16.3. El problema es que al actualizar la biblioteca de programación otro módulo dejó de funcionar.

Problema

El modulo que dejó de funcionar consistía en una serie de combos que se generan dinámicamente según el valor escogido en el combo precedente. Por ejemplo, en el primero tienes una lista de continentes. Si eliges «Europa» en el siguiente combo se cargarán los países de dicho continente. Cada combo es un componente de React que se va a añadiendo a un variable incluida en el DOM devuelto por el método render de la clase. Cuando se dispara el evento onChange de uno de los componentes, se descargan los datos pertinentes para generar otro componente a añadir a la variable con el array de componentes y, hasta la susodicha actualización, aparecía en pantalla el nuevo combo. Ahora no aparecía el siguiente combo, tampoco saltaba ningún error y pude comprobar que el array de combos se estaba llenando correctamente. Daba la sensación de que no se estaba recreando el estado que disparaba la renderización del componente.

Solución

Tras intentar varias tentativas complejas e infructuosas, algunas de las cuales implicaban forzar el cambio de estado del padre desde el componente hijo, o el uso de getDerivedStateFromProps() para detectar los cambios en las propiedades del componente y forzar la actualización del DOM, di con un artículo de un blog de reactjs.org que abrió me los ojos. El título del artículo es Probablemente no necesites estado derivado y, efectivamente, bastaba añadir una propiedad key al elemento padre devuelto por el método render para que el componente volviera a recrear el DOM.