Remediating Superfluous Re-Rendering in React Applications

React is an extremely popular framework for constructing user interfaces (UIs). A React UI is organized as a tree of components, each of which is defined by a function that returns a literal written in JSX, a syntactic extension of JavaScript consisting of a combination of XML tags, executable JavaScript code, and references to sub-components. React supports incremental re-rendering by maintaining an in-memory representation of a web page’s Document Object Model (DOM) and automatically calculating a set of minimal changes that must be applied to the DOM when state changes occur.