How to detect child renders in a parent component in react.js

Question

I'm trying to cache the rendered markup of the App component. I know that this is somehow "against the rules" but I'm in a server-less environment (chrome-extension). Upon page load i want to inject the cached App markup into the DOM. The expected result is similar to the experience of having the react-component rendererd on a server. Very much as described here: http://www.tabforacause.org/blog/2015/01/29/using-reactjs-and-application-cache-fast-synced-app/.

To illustrate my usecase, I have updated the Thinking in react example:

• App
  • FilterableProductTable
    • SearchBar
    • ProductTable (containing from reflux store in state)
      • ProductCategoryRow
      • ProductRow

As is expected, neither componentDidUpdate nor componentWillUpdate are called in App.

Is it possible to detect updated child components in the App component in a sane way? Preferably without modifying the child component classes?

I would like to avoid moving props/state to App.

Answer 1

I came up with a solution, that works as a drop in solution (without modifying child-components, or having knowledge of the whole app state, e.g.: Flux pattern):

App can be wrapped in a Component that uses the MutationObserver to track actual changes in the DOM.