Reconciliación y algoritmo diferencial en React

Si has usado React para desarrollar aplicaciones web seguro que ya sabes que cuando un componente es modificado, ésta biblioteca de código de Javascript crea un DOM virtual para compararlo con el DOM actual y, de este modo, calcular si es necesario actualizarlo. A este proceso de actualizar el DOM actual cuando es necesario, para mantenerlo sincronizado con el DOM virtual, se le llama Reconciliación.

Si usáramos un algoritmo de vanguardia para calcular el número mínimo de operaciones necesarias para transformar un árbol de nodos como el DOM en otro, la complejidad sería del orden de O(n³), donde n es el número de elementos en el árbol. Esto nos lleva a que mostrar 1000 elementos se complica hasta el orden de unos mil millones de operaciones, lo que afectaría drásticamente al rendimiento y, por este motivo, se usa un algoritmo heurístico, el algoritmo diferencial, que se basa en dos suposiciones:

1. Dos elementos de diferentes tipos producirán diferentes árboles.
2. El desarrollador puede insinuar qué elementos secundarios pueden ser estables en diferentes renders con una propiedad key.