Real World Example

A score page updates the score every few seconds. Thanks to the Virtual DOM only the changed text nodes are touched; the video player, comments and inputs on the page are left alone, so nothing flickers or loses focus.

function ScoreBoard({ match }) {
  return (
    <div>
      <h2>{match.teamA} vs {match.teamB}</h2>
      <p className="score">{match.runs}/{match.wickets} ({match.overs} ov)</p>  {/* only this changes */}
      <LiveVideo src={match.streamUrl} />                                        {/* untouched */}
      <CommentBox />                                                             {/* keeps what you typed */}
    </div>
  );
}