Visualize the Virtual DOM in React?

Question

Is there any way to visualize the Virtual DOM and/or Reconciliation phase in React, to be able to compare the previous snapshot with the newly rendered one? This would be extremely helpful for debugging cases where React causes unexpected unmounting of Components, etc.

Answer 1

State management is tricky and can become an extremely painfull if not handled perfectly. So there're lots of tools to visualise the needed part but here is a couple of example what you're looking for

• React Sight
• React Dom Visualizer