Change the way Match/Miss integrate

The only guarantee from React regarding the lifecycle of ancestors and
descendants is that cDM of descendants will be called before cDM of
ancestors. Also, in the future (React Fibers), cWM may get called but
the component may never get mounted, and there won’t be a lifecycle hook
to know the component’s rendering was cancelled (facebook/react#7671).

So, instead, we add matches in cDM instead of cWM, and then subscribe
to the MatchProvider. When the ancestor MatchProvider mounts, it
notifies the misses so they know whether or not they should render.

This won’t work on the server, but that’s next!

Author: ryanflorence

modules/Match.js

@@ -12,29 +12,31 @@ class RegisterMatch extends React.Component {
     match: PropTypes.object
   }
 
-  componentWillMount() {
+  componentDidMount() {
     const { match:matchContext } = this.context
     const { match } = this.props
 
-    if (match && matchContext)
+    if (match && matchContext) {
       matchContext.addMatch(match)
+    }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
     const { match } = this.context
 
     if (match) {
-      if (nextProps.match && !this.props.match) {
-        match.addMatch(nextProps.match)
-      } else if (!nextProps.match && this.props.match) {
-        match.removeMatch(this.props.match)
+      if (prevProps.match && !this.props.match) {
+        match.removeMatch(prevProps.match)
+      } else if (!prevProps.match && this.props.match) {
+        match.addMatch(this.props.match)
       }
     }
   }
 
   componentWillUnmount() {
-    if (this.props.match)
+    if (this.props.match) {
       this.context.match.removeMatch(this.props.match)
+    }
   }
 
   render() {

modules/MatchProvider.js

@@ -19,6 +19,8 @@ class MatchProvider extends React.Component {
     // React doesn't support a parent calling `setState` from an descendant's
     // componentWillMount, so we use an instance property to track matches
     this.matches = []
+    this.subscribers = []
+    this.hasMatches = null // use null for initial value
   }
 
   addMatch = match => {
@@ -38,7 +40,35 @@ class MatchProvider extends React.Component {
         parent: this.parent,
         matches: this.matches,
 
-        matchFound: () => this.matches.length > 0
+        subscribe: (fn) => {
+          this.subscribers.push(fn)
+          return () => {
+            this.subscribers.splice(this.subscribers.indexOf(fn), 1)
+          }
+        }
+
+      }
+    }
+  }
+
+  componentDidUpdate() {
+    this.notifySubscribers()
+  }
+
+  componentDidMount() {
+    this.notifySubscribers()
+  }
+
+  notifySubscribers() {
+    // React's contract is that cDM of descendants is called before cDM of
+    // ancestors, so here we can safely check if we found a match
+    if (this.subscribers.length) {
+      const hadMatches = this.hasMatches
+      this.hasMatches = this.matches.length !== 0
+      // optimization, don't notify if nothing changed initial will be null, so
+      // we can get initial render correct
+      if (this.hasMatches !== hadMatches) {
+        this.subscribers.forEach(fn => fn(this.hasMatches))
       }
     }
   }

modules/Miss.js

@@ -10,24 +10,38 @@ class Miss extends React.Component {
   }
 
   static contextTypes = {
-    match: PropTypes.object.isRequired,
-    location: PropTypes.object.isRequired,
+    match: PropTypes.object,
+    location: PropTypes.object,
     serverRouter: PropTypes.object
   }
 
+  state = {
+    noMatchesInContext: false
+  }
+
+  componentWillMount() {
+    // ignore if rendered out of context (probably for unit tests)
+    if (this.context.match) {
+      this.unsubscribe = this.context.match.subscribe((matchesFound) => {
+        this.setState({
+          noMatchesInContext: !matchesFound
+        })
+      })
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.unsubscribe) {
+      this.unsubscribe()
+    }
+  }
+
   render() {
     const { render, component:Component } = this.props
-    const { match, serverRouter } = this.context
+    const { noMatchesInContext } = this.state
     const { location:locationProp } = this.props
     const location = locationProp || this.context.location
-    if (!match) {
-      // don't render if out of context (probably a unit test)
-      return null
-    } else if (!match.matchFound()) {
-      // side-effect in render, only happens on the server
-      // and calling it multiple times should be fine
-      if (serverRouter)
-        serverRouter.onMiss(location)
+    if (noMatchesInContext) {
       return (
         render ? (
           render({ location })

modules/__tests__/Miss-test.js

@@ -1,28 +1,33 @@
 import expect from 'expect'
 import React from 'react'
 import Miss from '../Miss'
-import { renderToString } from 'react-dom/server'
+import { render, unmountComponentAtNode } from 'react-dom'
 import MatchProvider from '../MatchProvider'
 
 describe('Miss', () => {
   const TEXT = 'TEXT'
+  const loc = { pathname: '/', search: '', hash: '', state: TEXT }
 
-  it('renders a Component prop', () => {
+  it('renders a Component prop', (done) => {
+    const div = document.createElement('div')
     const Page = () => <div>{TEXT}</div>
-    const html = renderToString(
+    render((
       <MatchProvider>
         <Miss
-          location={{}}
+          location={loc}
           component={Page}
         />
       </MatchProvider>
-    )
-    expect(html).toContain(TEXT)
+    ), div, () => {
+      expect(div.innerHTML).toContain(TEXT)
+      unmountComponentAtNode(div)
+      done()
+    })
   })
 
-  it('renders a render prop passes a location', () => {
-    const loc = { state: TEXT }
-    const html = renderToString(
+  it('renders a render prop passes a location', (done) => {
+    const div = document.createElement('div')
+    render((
       <MatchProvider>
         <Miss
           location={loc}
@@ -31,18 +36,25 @@ describe('Miss', () => {
           )}
         />
       </MatchProvider>
-    )
-    expect(html).toContain(TEXT)
+    ), div, () => {
+      expect(div.innerHTML).toContain(TEXT)
+      unmountComponentAtNode(div)
+      done()
+    })
   })
 
-  it('renders null when out of context', () => {
+  it('renders null when out of context', (done) => {
+    const div = document.createElement('div')
     const Page = () => <div>{TEXT}</div>
-    const html = renderToString(
+    render((
       <Miss
-        location={{}}
+        location={loc}
         component={Page}
       />
-    )
-    expect(html).toNotContain(TEXT)
+    ), div, () => {
+      expect(div.innerHTML).toNotContain(TEXT)
+      unmountComponentAtNode(div)
+      done()
+    })
   })
 })